feat: add file dom api support to files api

Author: hugomrdias

examples/upload-file-via-browser/.eslintrc

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "Upload file to IPFS via browser using js-ipfs-http-client with Webpack",
   "scripts": {
-    "start": "node server.js"
+    "start": "webpack-dev-server"
   },
   "author": "Harlan T Wood <code@harlantwood.net>",
   "contributors": [
@@ -12,12 +12,26 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-react": "^7.11.1",
     "ipfs-http-client": "../../",
     "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"
-  }
+    "webpack": "~4.30.0",
+    "webpack-dev-server": "~3.3.1"
+  },
+  "eslintConfig" : {
+    "extends": "standard",
+    "rules": {
+      "react/jsx-uses-react": 2,
+      "react/jsx-uses-vars": 2,
+      "react/react-in-jsx-scope": 2
+    },
+    "plugins": [
+      "react"
+    ]
+  }  
 }

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

@@ -1,6 +1,6 @@
 'use strict'
 const React = require('react')
-const ipfsClient = require('ipfs-http-client')
+const ipfsClient = require('../../../src')
 
 // create a stream from a file, which enables uploads of big files without allocating memory twice
 const fileReaderPullStream = require('pull-file-reader')
@@ -11,7 +11,7 @@ class App extends React.Component {
     this.state = {
       added_file_hash: null
     }
-    this.ipfs = ipfsClient('localhost', '5001')
+    this.ipfs = ipfsClient('localhost', '50895')
 
     // bind methods
     this.captureFile = this.captureFile.bind(this)
@@ -22,25 +22,23 @@ class App extends React.Component {
   captureFile (event) {
     event.stopPropagation()
     event.preventDefault()
-    const file = event.target.files[0]
     if (document.getElementById('keepFilename').checked) {
-      this.saveToIpfsWithFilename(file)
+      this.saveToIpfsWithFilename(event.target.files)
     } else {
-      this.saveToIpfs(file)
+      this.saveToIpfs(event.target.files)
     }
   }
 
   // Example #1
   // Add file to IPFS and return a CID
-  saveToIpfs (file) {
+  saveToIpfs (files) {
     let ipfsId
-    const fileStream = fileReaderPullStream(file)
-    this.ipfs.add(fileStream, { progress: (prog) => console.log(`received: ${prog}`) })
+    this.ipfs.add([...files][0], { progress: (prog) => console.log(`received: ${prog}`) })
       .then((response) => {
         console.log(response)
         ipfsId = response[0].hash
         console.log(ipfsId)
-        this.setState({added_file_hash: ipfsId})
+        this.setState({ added_file_hash: ipfsId })
       }).catch((err) => {
         console.error(err)
       })
@@ -65,7 +63,7 @@ class App extends React.Component {
         // CID of wrapping directory is returned last
         ipfsId = response[response.length - 1].hash
         console.log(ipfsId)
-        this.setState({added_file_hash: ipfsId})
+        this.setState({ added_file_hash: ipfsId })
       }).catch((err) => {
         console.error(err)
       })

examples/upload-file-via-browser/server.js

@@ -1,24 +1,18 @@
 'use strict'
 
 const path = require('path')
-const webpack = require('webpack')
 
 module.exports = {
   mode: 'development',
   devtool: 'eval',
   entry: [
-    'webpack-dev-server/client?http://localhost:3000',
-    'webpack/hot/only-dev-server',
     './src/index'
   ],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
     publicPath: '/static/'
   },
-  plugins: [
-    new webpack.HotModuleReplacementPlugin()
-  ],
   module: {
     rules: [
       {
@@ -28,8 +22,7 @@ module.exports = {
           {
             loader: 'babel-loader',
             options: {
-              presets: ['@babel/preset-env', '@babel/preset-react'],
-              plugins: ['react-hot-loader/babel']
+              presets: ['@babel/preset-env', '@babel/preset-react']
             }
           }
         ]

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

@@ -45,6 +45,7 @@
     "iso-url": "~0.4.6",
     "just-kebab-case": "^1.1.0",
     "just-map-keys": "^1.1.0",
+    "kind-of": "^6.0.2",
     "lru-cache": "^5.1.1",
     "multiaddr": "^6.0.6",
     "multibase": "~0.6.0",
@@ -79,7 +80,6 @@
     "chai": "^4.2.0",
     "cross-env": "^5.2.0",
     "dirty-chai": "^2.0.1",
-    "eslint-plugin-react": "^7.11.1",
     "go-ipfs-dep": "~0.4.19",
     "interface-ipfs-core": "~0.99.0",
     "ipfsd-ctl": "~0.42.0",

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

@@ -2,6 +2,7 @@
 
 const promisify = require('promisify-es6')
 const ConcatStream = require('concat-stream')
+const kindOf = require('kind-of')
 const once = require('once')
 const isStream = require('is-stream')
 const isSource = require('is-pull-stream').isSource
@@ -16,7 +17,6 @@ module.exports = (send) => {
       _callback = options
       options = null
     }
-
     const callback = once(_callback)
 
     if (!options) {
@@ -35,7 +35,7 @@ module.exports = (send) => {
       return Boolean(obj.path) && typeof obj.path === 'string'
     }
     // An input atom: a buffer, stream or content object
-    const isInput = obj => isBufferOrStream(obj) || isContentObject(obj)
+    const isInput = obj => isBufferOrStream(obj) || isContentObject(obj) || kindOf(_files) === 'file'
     // All is ok if data isInput or data is an array of isInput
     const ok = isInput(_files) || (Array.isArray(_files) && _files.every(isInput))
 

package.json

@@ -2,7 +2,11 @@
 
 const isNode = require('detect-node')
 const flatmap = require('flatmap')
+const { Readable } = require('stream')
+const kindOf = require('kind-of')
 
+// eslint-disable-next-line no-undef
+const supportsFileReader = FileReader in self
 function loadPaths (opts, file) {
   const path = require('path')
   const fs = require('fs')
@@ -73,6 +77,34 @@ function loadPaths (opts, file) {
   }
 }
 
+function streamFromFileReader (file) {
+  class FileStream extends Readable {
+    constructor (file, options = {}) {
+      super(options)
+      this.offset = 0
+      this.chunkSize = 1024 * 1024
+      this.fileReader = new self.FileReader(file)
+      this.fileReader.onloadend = (event) => {
+        const data = event.target.result
+        if (data.byteLength === 0) {
+          this.push(null)
+        }
+        this.push(new Uint8Array(data))
+      }
+      this.fileReader.onerror = (err) => this.emit('error', err)
+    }
+
+    _read (size) {
+      const end = this.offset + this.chunkSize
+      const slice = file.slice(this.offset, end)
+      this.fileReader.readAsArrayBuffer(slice)
+      this.offset = end
+    }
+  }
+
+  return new FileStream(file)
+}
+
 function prepareFile (file, opts) {
   let files = [].concat(file)
 
@@ -94,6 +126,15 @@ function prepareFile (file, opts) {
       return file
     }
 
+    if (supportsFileReader && kindOf(file) === 'file') {
+      return {
+        path: '',
+        symlink: false,
+        dir: false,
+        content: streamFromFileReader(file, opts)
+      }
+    }
+
     return {
       path: '',
       symlink: false,