add browser-add-file example

ipfs-inactive · Sep 8, 2016 · 2093dd9 · 2093dd9
1 parent ed096a5
commit 2093dd9
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 0 deletions.
diff --git a/examples/browser-add-file/README.md b/examples/browser-add-file/README.md
@@ -0,0 +1,18 @@
+# JS IPFS API - Example Browser - Add
+
+## Setup
+
+Install [go-ipfs](https://ipfs.io/docs/install/) and run it
+
+```bash
+$ ipfs daemon
+```
+
+then in this folder run
+
+```bash
+$ npm install
+$ npm start
+```
+
+and open your browser at `http://localhost:8888`
diff --git a/examples/browser-add-file/index.html b/examples/browser-add-file/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>JS IPFS API - Example - Browser - Add</title>
+    <script src="https://wzrd.in/standalone/buffer"></script> <!-- feross buffer -->
+    <script src="https://npmcdn.com/ipfs-api/dist/index.js"></script>
+    <script src="index.js"></script>
+  </head>
+  <body>
+    <div>
+      <h1>Add text - <i>works</i></h1>
+      <textarea id="source">
+      </textarea>
+      <button id="storeText">create in ipfs</button>
+    </div>
+    <div>
+      <h1>Add buffer - <i>does not work</i></h1>
+      <input type="file" id="filePicker">
+      <button id="storeBuffer">create in ipfs</button>
+    </div>
+    <div>
+      <h1>Response from ipfs - <i>stream res unhandled</i></h1>
+      <div id="hash">[ipfs hash]</div>
+      <div id="content">[ipfs content]</div>
+    </div>
+  </body>
+</html>
diff --git a/examples/browser-add-file/index.js b/examples/browser-add-file/index.js
@@ -0,0 +1,50 @@
+/* globals FileReader */
+'use strict'
+
+var ipfs = window.IpfsApi()
+
+function storeText () {
+  store(document.getElementById('source').value)
+}
+
+function storeFile () {
+  const file = document.getElementById('filePicker').files[0]
+  const reader = new FileReader()
+  reader.onload = function () {
+    store(reader.result)
+  }
+  reader.readAsArrayBuffer(file)
+}
+
+// from examples/browser-add
+function store (toStore) {
+  ipfs.add(new window.buffer.Buffer(toStore), function (err, res) {
+    if (err || !res) {
+      return console.error('ipfs add error', err, res)
+    }
+
+    res.forEach(function (file) {
+      console.log('successfully stored', file)
+      display(file.path)
+    })
+  })
+}
+
+function display (hash) {
+  ipfs.cat(hash, function (err, res) {
+    if (err || !res) {
+      return console.error('ipfs cat error', err, res)
+    }
+    if (res.readable) {
+      console.error('unhandled: cat result is a pipe', res)
+    } else {
+      document.getElementById('hash').innerText = hash
+      document.getElementById('content').innerText = res
+    }
+  })
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  document.getElementById('storeText').onclick = storeText
+  document.getElementById('storeBuffer').onclick = storeFile
+})
diff --git a/examples/browser-add-file/package.json b/examples/browser-add-file/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "ipfs-api-example-browser-add-file",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "http-server -a 127.0.0.1 -p 8888"
+  },
+  "keywords": [],
+  "author": "nycoliver",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^0.9.0",
+    "ipfs-api": "^6.0.3"
+  }
+}