Updated demo to handle file uploading

CiprianDraghici · Aug 27, 2017 · 1edffea · 1edffea
1 parent 54d9c2c
commit 1edffea
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
 npm-debug.log
+.uploads/*
diff --git a/style.css → assets/style.css b/style.css → assets/style.css
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <title>react-files</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
-    <link href="./style.css" rel="stylesheet" type="text/css">
+    <link href="/assets/style.css" rel="stylesheet" type="text/css">
   </head>
   <body>
     <div id="container">

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "build": "rm -rf dist && webpack",
     "dev": "node server.js",
+    "demo": "node server.js",
     "test": "mocha --compilers js:babel-core/register --recursive test/test.js",
     "test:watch": "mocha --compilers js:babel-core/register --recursive test/test.js --watch --reporter min"
   },
@@ -32,12 +33,14 @@
   },
   "homepage": "https://github.com/mother/react-files",
   "devDependencies": {
+    "axios": "0.16.2",
     "babel-core": "6.21.0",
     "babel-eslint": "7.1.1",
     "babel-loader": "6.2.10",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-react": "6.16.0",
     "babel-preset-stage-0": "6.16.0",
+    "blob": "0.0.4",
     "chai": "3.5.0",
     "enzyme": "2.4.1",
     "eslint": "3.4.0",
@@ -46,15 +49,19 @@
     "eslint-plugin-promise": "2.0.1",
     "eslint-plugin-react": "6.2.0",
     "eslint-plugin-standard": "2.0.0",
+    "express": "4.15.4",
+    "form-data": "2.3.1",
     "jsdom": "9.4.2",
     "mocha": "3.0.2",
+    "multer": "1.3.0",
     "prop-types": "15.5.10",
     "react": "15.6.1",
     "react-addons-test-utils": "15.3.1",
     "react-dom": "15.6.1",
     "react-hot-loader": "1.3.1",
     "sinon": "1.17.5",
     "webpack": "1.12.2",
-    "webpack-dev-server": "1.12.1"
+    "webpack-dev-middleware": "1.12.0",
+    "webpack-hot-middleware": "2.18.2"
   }
 }
diff --git a/server.js b/server.js
@@ -1,14 +1,52 @@
+var express = require('express')
+var fs = require('fs')
+var multer = require('multer')
+var path = require('path')
+
 var webpack = require('webpack')
-var WebpackDevServer = require('webpack-dev-server')
+var webpackDevMiddleware = require('webpack-dev-middleware')
+var webpackHotMiddleware = require('webpack-hot-middleware')
 var config = require('./webpack.dev.config')
+var compiler = webpack(config)
+
+var app = express()
+var upload = multer({ dest: './.uploads/' })
+
+app.use(webpackDevMiddleware(compiler, {
+   publicPath: config.output.publicPath,
+   noInfo: true,
+   quiet: false,
+   historyApiFallback: true,
+   stats: {
+      colors: true
+   }
+}))
+
+app.use(webpackHotMiddleware(compiler, {
+   log: console.log,
+   path: '/__webpack_hmr',
+   heartbeat: 10 * 1000
+}))
+
+app.use('/assets', express.static('assets'))
+
+app.get('/', function (req, res, next) {
+   res.sendFile(path.join(__dirname + '/index.html'));
+})
+
+app.post('/files', upload.any(), function (req, res, next) {
+   if (!req.files) {
+      return next(new Error('No files uploaded'))
+   }
+
+   req.files.forEach((file) => {
+      console.log(file)
+      fs.unlinkSync(path.join(__dirname, file.path))
+   })
+
+   res.status(200).end()
+})
 
-new WebpackDevServer(webpack(config), {
-  publicPath: config.output.publicPath,
-  hot: true,
-  historyApiFallback: true
-}).listen(8080, 'localhost', function (err, result) {
-  if (err) {
-    return console.log(err)
-  }
-  console.log('Listening at http://localhost:8080/')
+app.listen(8080, function () {
+   console.log(`Starting react-files demo on port 8080`)
 })
diff --git a/src/demo.js b/src/demo.js
@@ -1,3 +1,6 @@
+import axios from 'axios'
+import Blob from 'blob'
+import FormData from 'form-data'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import Files from './'
@@ -31,7 +34,15 @@ class FilesDemo1 extends React.Component {
   }
 
   filesUpload = () => {
-    window.alert('Ready to upload ' + this.state.files.length + ' file(s)!')
+    const formData = new FormData()
+    Object.keys(this.state.files).forEach((key) => {
+      const file = this.state.files[key]
+      formData.append(key, new Blob([file], { type: file.type }), file.name || 'file')
+    })
+
+    axios.post(`/files`, formData)
+    .then(response => window.alert(`${this.state.files.length} files uploaded succesfully!`))
+    .catch(err => window.alert('Error uploading files :('))
   }
 
   render () {

diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -4,8 +4,7 @@ var webpack = require('webpack')
 module.exports = {
   devtool: 'eval',
   entry: [
-    'webpack-dev-server/client?http://localhost:8080',
-    'webpack/hot/only-dev-server',
+    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
     './src/demo'
   ],
   output: {