feat: upload example works with big files

Old example created a Buffer from the file handle which quickly hit
allocation limits with big files.

This change replaces Buffer with a stream, which enables example to work
with big files (tested with 3.6GB video, took ~30seconds with go-ipfs on
localhost).

While I was at it, I added a demo of a pattern for persisting filenames
by wrapping them in unixfs directory.

License: MIT
Signed-off-by: Marcin Rataj <[email protected]>

Author: lidel

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

@@ -14,6 +14,7 @@
     "babel-core": "^5.4.7",
     "babel-loader": "^5.1.2",
     "ipfs-api": "../../",
+    "pull-file-reader": "^1.0.2",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-hot-loader": "^1.3.1",

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

@@ -2,6 +2,9 @@
 const React = require('react')
 const ipfsAPI = require('ipfs-api')
 
+// create a stream from a file, which enables uploads of big files without allocating memory twice
+const fileReaderPullStream = require('pull-file-reader')
+
 class App extends React.Component {
   constructor () {
     super()
@@ -20,15 +23,19 @@ class App extends React.Component {
     event.stopPropagation()
     event.preventDefault()
     const file = event.target.files[0]
-    let reader = new window.FileReader()
-    reader.onloadend = () => this.saveToIpfs(reader)
-    reader.readAsArrayBuffer(file)
+    if (document.getElementById("keepFilename").checked) {
+      this.saveToIpfsWithFilename(file)
+    } else {
+      this.saveToIpfs(file)
+    }
   }
 
-  saveToIpfs (reader) {
+  // Example #1
+  // Add file to IPFS and return a CID
+  saveToIpfs (file) {
     let ipfsId
-    const buffer = Buffer.from(reader.result)
-    this.ipfsApi.add(buffer, { progress: (prog) => console.log(`received: ${prog}`) })
+    const fileStream = fileReaderPullStream(file)
+    this.ipfsApi.add(fileStream, { progress: (prog) => console.log(`received: ${prog}`) })
       .then((response) => {
         console.log(response)
         ipfsId = response[0].hash
@@ -39,6 +46,31 @@ class App extends React.Component {
       })
   }
 
+  // Example #2
+  // Add file to IPFS and wrap it in a directory to keep the original filename
+  saveToIpfsWithFilename (file) {
+    let ipfsId
+    const fileStream = fileReaderPullStream(file)
+    const fileDetails = {
+      path: file.name,
+      content: fileStream
+    }
+    const options = {
+      wrapWithDirectory: true,
+      progress: (prog) => console.log(`received: ${prog}`)
+    }
+    this.ipfsApi.add(fileDetails, options)
+      .then((response) => {
+        console.log(response)
+        // CID of wrapping directory is returned last
+        ipfsId = response[response.length-1].hash
+        console.log(ipfsId)
+        this.setState({added_file_hash: ipfsId})
+      }).catch((err) => {
+        console.error(err)
+      })
+  }
+
   handleSubmit (event) {
     event.preventDefault()
   }
@@ -47,7 +79,8 @@ class App extends React.Component {
     return (
       <div>
         <form id='captureMedia' onSubmit={this.handleSubmit}>
-          <input type='file' onChange={this.captureFile} />
+          <input type='file' onChange={this.captureFile} /><br/>
+          <label for='keepFilename'><input type='checkbox' id='keepFilename' name='keepFilename' /> keep filename</label>
         </form>
         <div>
           <a target='_blank'