#2 Added preset and a dummy upload services example

demo/Server.js

@@ -8,14 +8,30 @@ import webpackMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import webpack from 'webpack';
 
+import multer from 'multer';
+
+const storage = multer.diskStorage({
+    destination: function(request, file, callback) {
+        callback(null, "./demo/uploads");
+    },
+    filename: function(request, file, callback) {
+        callback(null, file.originalname + '-' + Date.now())
+    }
+});
+
+const upload = multer({storage});
+
+
 const webpackCompiler = webpack(webpackConfig);
 
 require.extensions['.html'] = function (module, filename) {
     module.exports = fs.readFileSync(filename, 'utf8');
 };
 
 const development = process.env.NODE_ENV !== 'production';
+
 let app = express();
+
 let router = new Router();
 
 router.get("/api/languages", (request, response) => {
@@ -37,6 +53,18 @@ router.get("/api/languages", (request, response) => {
     response.status(200).json(arr);
 });
 
+router.post("/upload", upload.array("fileData"), (request, response) => {
+   let files = request.files;
+
+
+   files.forEach(file => {
+       console.log(JSON.stringify(file));
+   });
+
+   response.end();
+
+});
+
 app.use(router);
 
 if (development) {

demo/presets.js

@@ -124,5 +124,15 @@ export default [
         layoutName: 'edit',
         formTitle: 'Edit contact',
         schema: require('./presets/componentsFieldGroup.txt')
+    },
+    {
+        name: 'componentsFileUpload',
+        displayName: 'Components - FileUpload (Experimental)',
+        entityName: 'contact',
+        layoutName: 'edit',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsFileUpload.txt')
     }
+
+
 ]

demo/presets/componentsFileUpload.txt

@@ -0,0 +1,28 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "fileUploader",
+                    type: "string",
+
+                }
+            ],
+            layouts: [
+                {
+                    name: "edit",
+                    fields: [
+                        {
+                            name: "fileUploader",
+                            displayName: "File Upload",
+                            component: "FileUpload",
+                            url: "/upload"
+
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}

package.json

@@ -29,10 +29,12 @@
   "homepage": "https://github.com/redux-autoform/redux-autoform-bootstrap-ui#readme",
   "dependencies": {
     "attr-accept": "^1.0.3",
+    "body-parser": "^1.15.2",
     "bootstrap": "^3.3.6",
     "filesize": "^3.3.0",
     "font-awesome": "^4.6.3",
     "isomorphic-fetch": "^2.2.1",
+    "multer": "^1.2.0",
     "react": "^15.1.0",
     "react-bootstrap": "^0.30.0",
     "react-dom": "^15.2.1",

src/components/field/FileUpload.js

@@ -31,7 +31,7 @@ export default class FileUpload extends Component {
 		let fileData = new FormData();
 
 		files.forEach((file) => {
-			fileData.append(file.name, file);
+			fileData.append("fileData", file);
 		});
 
 		fetch(url, {