From ef0ba5002685e9dbb3d854d0f5afba3ecdaa9346 Mon Sep 17 00:00:00 2001
From: Yahya <ya7yaz@gmail.com>
Date: Sun, 3 Sep 2017 15:08:15 +0200
Subject: [PATCH] docs: fix example #952 adding +50Mb files via createAddStream
 (#983)

---
 .../exchange-files-in-browser/package.json    |  8 +-
 .../public/index.html                         |  3 +-
 .../public/js/app.js                          | 81 ++++++++++++++++---
 3 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/examples/exchange-files-in-browser/package.json b/examples/exchange-files-in-browser/package.json
index e5ba1b8ee2..84ea13b2a4 100644
--- a/examples/exchange-files-in-browser/package.json
+++ b/examples/exchange-files-in-browser/package.json
@@ -2,10 +2,16 @@
   "name": "exchange-files-browser",
   "version": "0.0.0",
   "scripts": {
-    "start": "http-server -c-1 -p 12345 public"
+    "bundle": "browserify public/js/app.js > public/js/bundle.js",
+    "serve": "http-server -c-1 -p 12345 public",
+    "start": "npm run bundle && npm run serve"
   },
   "license": "MIT",
   "devDependencies": {
+    "browserify": "^14.4.0",
     "http-server": "^0.10.0"
+  },
+  "dependencies": {
+    "stream-buffers": "^3.0.1"
   }
 }
diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html
index d63bf2d53c..7b4da10591 100644
--- a/examples/exchange-files-in-browser/public/index.html
+++ b/examples/exchange-files-in-browser/public/index.html
@@ -63,6 +63,7 @@ <h2>Peers</h2>
 
     <!-- The IPFS node module -->
     <script src="//unpkg.com/ipfs/dist/index.min.js"></script>
-    <script src="js/app.js"></script>
+    <!-- <script src="js/app.js"></script> -->
+    <script src="js/bundle.js"></script>
   </body>
 </html>
diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js
index 8382ff794e..8d14ce7c6d 100644
--- a/examples/exchange-files-in-browser/public/js/app.js
+++ b/examples/exchange-files-in-browser/public/js/app.js
@@ -20,6 +20,7 @@ const $details = document.querySelector('#details')
 const $allDisabledButtons = document.querySelectorAll('button:disabled')
 const $allDisabledInputs = document.querySelectorAll('input:disabled')
 const $filesList = document.querySelector('.file-list')
+const streamBuffers = require('stream-buffers')
 
 let node
 let peerInfo
@@ -137,16 +138,71 @@ function onDrop (event) {
   filesArray.map((file) => {
     readFileContents(file)
       .then((buffer) => {
-        return node.files.add([{
-          path: file.name,
-          content: new node.types.Buffer(buffer)
-        }])
+        let fileSize = buffer.byteLength
+
+        if (fileSize < 50000000) {
+          return node.files.add([{
+            path: file.name,
+            content: new node.types.Buffer(buffer)
+          }])
+        } else {
+          // use createAddStream and chunk the file.
+          let progress = 0
+
+          let myReadableStreamBuffer = new streamBuffers.ReadableStreamBuffer({
+            // frequency: 10,   // in milliseconds.
+            chunkSize: 32048  // in bytes.
+          })
+
+          node.files.createAddStream((err, stream) => {
+            if (err) throw err
+
+            stream.on('data', (file) => {
+              $multihashInput.value = file.hash
+              $filesStatus.innerHTML = `Added ${file.path} as ${file.hash}`
+
+              if (progressbar) {
+                clearInterval(progressbar)
+                progress = 0
+              }
+            })
+
+            myReadableStreamBuffer.on('data', (chunk) => {
+              progress += chunk.byteLength
+            })
+
+            if (!myReadableStreamBuffer.destroy) {
+              myReadableStreamBuffer.destroy = () => {}
+            }
+
+            stream.write({
+              path: file.name,
+              content: myReadableStreamBuffer
+            })
+
+            myReadableStreamBuffer.put(Buffer.from(buffer))
+            myReadableStreamBuffer.stop()
+
+            myReadableStreamBuffer.on('end', () => {
+              stream.end()
+            })
+
+            myReadableStreamBuffer.resume()
+
+            // progress.
+            let progressbar = setInterval(() => {
+              console.log('progress: ', progress, '/', fileSize, ' = ', Math.floor((progress / fileSize) * 100), '%')
+            }, 5000)
+          })
+        }
       })
       .then((files) => {
-        $multihashInput.value = files[0].hash
-        $filesStatus.innerHTML = files
+        if (files && files.length) {
+          $multihashInput.value = files[0].hash
+          $filesStatus.innerHTML = files
           .map((e) => `Added ${e.path} as ${e.hash}`)
           .join('<br>')
+        }
       })
       .catch(onError)
   })
@@ -178,14 +234,15 @@ function refreshPeerList () {
     if (err) {
       return onError(err)
     }
-
     const peersAsHtml = peers
       .map((peer) => {
-        const addr = peer.addr.toString()
-        if (addr.indexOf('ipfs') >= 0) {
-          return addr
-        } else {
-          return addr + peer.peer.id.toB58String()
+        if (peer.addr) {
+          const addr = peer.addr.toString()
+          if (addr.indexOf('ipfs') >= 0) {
+            return addr
+          } else {
+            return addr + peer.peer.id.toB58String()
+          }
         }
       })
       .map((addr) => {