docs: update dependencies & config for upload-file-via-browser demo. (#891)

Author: Zhiyuan Lin

examples/upload-file-via-browser/package.json

@@ -11,14 +11,14 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^5.4.7",
-    "babel-loader": "^5.1.2",
+    "babel-core": "~6.26.3",
+    "babel-loader": "~8.0.4",
     "ipfs-api": "../../",
-    "pull-file-reader": "^1.0.2",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-hot-loader": "^1.3.1",
-    "webpack": "^2.0.0",
-    "webpack-dev-server": "^1.8.2"
+    "pull-file-reader": "~1.0.2",
+    "react": "~16.6.3",
+    "react-dom": "~16.6.3",
+    "react-hot-loader": "~4.3.12",
+    "webpack": "~4.25.1",
+    "webpack-dev-server": "~3.1.10"
   }
 }

examples/upload-file-via-browser/src/App.js

@@ -23,7 +23,7 @@ class App extends React.Component {
     event.stopPropagation()
     event.preventDefault()
     const file = event.target.files[0]
-    if (document.getElementById("keepFilename").checked) {
+    if (document.getElementById('keepFilename').checked) {
       this.saveToIpfsWithFilename(file)
     } else {
       this.saveToIpfs(file)
@@ -63,7 +63,7 @@ class App extends React.Component {
       .then((response) => {
         console.log(response)
         // CID of wrapping directory is returned last
-        ipfsId = response[response.length-1].hash
+        ipfsId = response[response.length - 1].hash
         console.log(ipfsId)
         this.setState({added_file_hash: ipfsId})
       }).catch((err) => {
@@ -80,7 +80,7 @@ class App extends React.Component {
       <div>
         <form id='captureMedia' onSubmit={this.handleSubmit}>
           <input type='file' onChange={this.captureFile} /><br/>
-          <label for='keepFilename'><input type='checkbox' id='keepFilename' name='keepFilename' /> keep filename</label>
+          <label htmlFor='keepFilename'><input type='checkbox' id='keepFilename' name='keepFilename' /> keep filename</label>
         </form>
         <div>
           <a target='_blank'

examples/upload-file-via-browser/webpack.config.js

@@ -1,9 +1,10 @@
 'use strict'
 
-let path = require('path')
-let webpack = require('webpack')
+const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
+  mode: 'development',
   devtool: 'eval',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
@@ -19,11 +20,21 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin()
   ],
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loaders: ['react-hot-loader', 'babel-loader'],
-      include: path.join(__dirname, 'src')
-    }]
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.join(__dirname, 'src'),
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env', '@babel/preset-react'],
+              plugins: ['react-hot-loader/babel']
+            }
+          }
+        ]
+      }
+    ]
   },
   node: {
     fs: 'empty',