docs: Add browser example for streaming files

ipfs · Feb 19, 2018 · bf277a0 · bf277a0
1 parent 42545dc
commit bf277a0
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 0 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -20,6 +20,7 @@ Let us know if you find any issue or if you want to contribute and add a new tut
 - [js-ipfs in the browser with WebPack](./browser-webpack)
 - [js-ipfs in the browser with a `<script>` tag](./browser-script-tag)
 - [js-ipfs in electron](./run-in-electron)
+- [Using streams to add a directory of files to ipfs](./browser-add-readable-stream)
 
 ## Understanding the IPFS Stack
 

diff --git a/examples/browser-add-readable-stream/README.md b/examples/browser-add-readable-stream/README.md
@@ -0,0 +1,7 @@
+# Using duplex streams to add files to IPFS in the browser
+
+If you have a number of files that you'd like to add to IPFS and end up with a hash representing the directory containing your files, you can invoke [`ipfs.files.add`](https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add) with an array of objects.
+
+But what if you don't know how many there will be in advance?  You can add multiple files to a directory in IPFS over time by using [`ipfs.files.addReadableStream`](https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#addreadablestream).
+
+See `index.js` for a working example and open `index.html` in your browser to see it run.
diff --git a/examples/browser-add-readable-stream/index.html b/examples/browser-add-readable-stream/index.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <pre id="output"></pre>
+    <script src="https://unpkg.com/ipfs/dist/index.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/browser-add-readable-stream/index.js b/examples/browser-add-readable-stream/index.js
@@ -0,0 +1,75 @@
+'use strict'
+
+/* global Ipfs */
+/* eslint-env browser */
+
+const repoPath = 'ipfs-' + Math.random()
+const ipfs = new Ipfs({ repo: repoPath })
+
+ipfs.on('ready', () => {
+  const directory = 'directory'
+
+  // Our list of files
+  const files = createFiles(directory)
+
+  streamFiles(directory, files, (err, directoryHash) => {
+    if (err) {
+      return log(`There was an error adding the files ${err}`)
+    }
+
+    ipfs.ls(directoryHash, (err, files) => {
+      if (err) {
+        return log(`There was an error listing the files ${err}`)
+      }
+
+      log(`
+--
+
+Directory contents:
+
+${directory}/ ${directoryHash}`)
+
+      files.forEach((file, index) => {
+        log(` ${index < files.length - 1 ? '\u251C' : '\u2514'}\u2500 ${file.name} ${file.path} ${file.hash}`)
+      })
+    })
+  })
+})
+
+const createFiles = (directory) => {
+  return [{
+    path: `${directory}/file1.txt`,
+
+    // content could be a stream, a url etc
+    content: ipfs.types.Buffer.from('one', 'utf8')
+  }, {
+    path: `${directory}/file2.txt`,
+    content: ipfs.types.Buffer.from('two', 'utf8')
+  }, {
+    path: `${directory}/file3.txt`,
+    content: ipfs.types.Buffer.from('three', 'utf8')
+  }]
+}
+
+const streamFiles = (directory, files, cb) => {
+  // Create a stream to write files to
+  const stream = ipfs.files.addReadableStream()
+  stream.on('data', function (data) {
+    log(`Added ${data.path} hash: ${data.hash}`)
+
+    // The last data event will contain the directory hash
+    if (data.path === directory) {
+      cb(null, data.hash)
+    }
+  })
+
+  // Add the files one by one
+  files.forEach(file => stream.write(file))
+
+  // When we have no more files to add, close the stream
+  stream.end()
+}
+
+const log = (line) => {
+  document.getElementById('output').appendChild(document.createTextNode(`${line}\r\n`))
+}