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 @@

Peers

- + + 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('
') + } }) .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) => {