docs: Add browser example for streaming files

ipfs · Feb 16, 2018 · 3b51fae · 3b51fae
1 parent 42545dc
commit 3b51fae
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 0 deletions.
diff --git a/examples/browser-streaming-files/README.md b/examples/browser-streaming-files/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#files-api) 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 streams.
+
+See `index.js` for a working example and open `index.html` in your browser to see it run.
diff --git a/examples/browser-streaming-files/index.html b/examples/browser-streaming-files/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-streaming-files/index.js b/examples/browser-streaming-files/index.js
@@ -0,0 +1,71 @@
+'use strict'
+
+/* global Ipfs */
+/* eslint-env browser */
+
+const repoPath = 'ipfs-' + Math.random()
+const node = new Ipfs({ repo: repoPath })
+
+node.on('ready', () => {
+  const directory = 'directory'
+
+  // Our list of files
+  const files = [{
+    path: `${directory}/file1.txt`,
+
+    // content could be a stream, a url etc
+    content: node.types.Buffer.from('one', 'utf8')
+  }, {
+    path: `${directory}/file2.txt`,
+    content: node.types.Buffer.from('two', 'utf8')
+  }, {
+    path: `${directory}/file3.txt`,
+    content: node.types.Buffer.from('three', 'utf8')
+  }]
+
+  streamFiles(directory, files, (err, directoryHash) => {
+    if (err) {
+      return log(`There was an error adding the files ${err}`)
+    }
+
+    node.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 streamFiles = (directory, files, cb) => {
+  // Create a stream to write files to
+  const stream = node.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`))
+}