Add demo uploader/downloader web app

VictorTaelin · Mar 6, 2017 · b7545ab · b7545ab
1 parent f0a4901
commit b7545ab
Show file tree

Hide file tree

Showing 27 changed files with 1,806 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,8 @@ This library allows you to interact with the Swarm network from JavaScript. It:
 
 - Can automatically download the Swarm binaries safely and administer the local node for you.
 
+[Live demo!](http://swarm-gateways.net/bzz:/162a33641dcf0c065b732aed9070ec8035a1a036a3ea69f65786da6b1f2986ca/)
+
 ## Installing
 
     npm install swarm-js

diff --git a/examples/dapp_download.js b/examples/dapp_download.js
@@ -3,7 +3,7 @@
 // (buffers). That allows any DApp to download the directory tree of any other
 // DApp in pure JavaScript.
 
-const swarm = require("./../swarm.js").at("http://swarm-gateways.net");
+const swarm = require("./../src/swarm.js").at("http://swarm-gateways.net");
 
 // The hash of the DApp we uploaded on the other example.
 const exampleDAppHash = "379d2791624c3e3719bb28f7bfa362cc9c726ec06482b5800c8e3cefaf2b7bcf";

diff --git a/examples/dapp_download_to_disk.js b/examples/dapp_download_to_disk.js
@@ -1,11 +1,11 @@
 // Downloads a directory hosted on the Swarm network to the disk.
 
-const swarm = require("./../swarm.js").at("http://swarm-gateways.net");
+const swarm = require("./../src/swarm.js").at("http://swarm-gateways.net");
 const path = require("path");
 
 // The hash of the DApp we uploaded on the other example.
 const exampleDAppHash = "379d2791624c3e3719bb28f7bfa362cc9c726ec06482b5800c8e3cefaf2b7bcf";
-const targetDirPath = path.join(__dirname,"example_dapp");
+const targetDirPath = path.join(__dirname,"example_dapp_simple");
 
 swarm.download(exampleDAppHash, targetDirPath)
   .then(dirPath => console.log(`Downloaded DApp to ${dirPath}.`))

diff --git a/examples/dapp_get_routes.js b/examples/dapp_get_routes.js
@@ -1,7 +1,7 @@
 // Solves the Swarm manifest at a given path recursively, returns a flat JSON
 // mapping the routes of its directory tree to the hash of each file on it.
 
-const swarm = require("./../swarm.js").at("http://swarm-gateways.net");
+const swarm = require("./../src/swarm.js").at("http://swarm-gateways.net");
 const exampleDAppHash = "8587c8e716bfceea12a7306d85a8a8ccad5019020916eb5a21fa47a7f1826891";
 
 swarm.downloadRoutes(exampleDAppHash)

diff --git a/examples/dapp_upload.js b/examples/dapp_upload.js
@@ -5,7 +5,7 @@
 // You can access it at:
 // http://swarm-gateways.net/bzz:/379d2791624c3e3719bb28f7bfa362cc9c726ec06482b5800c8e3cefaf2b7bcf/
 
-const swarm = require("./../swarm.js").at("http://swarm-gateways.net");
+const swarm = require("./../src/swarm.js").at("http://swarm-gateways.net");
 
 // The contents of index.html.
 const indexHtml = new Buffer(

diff --git a/examples/dapp_upload_from_disk.js b/examples/dapp_upload_from_disk.js
@@ -2,9 +2,9 @@
 // Outputs the DApp address. In this case, it is:
 // 379d2791624c3e3719bb28f7bfa362cc9c726ec06482b5800c8e3cefaf2b7bcf
 
-const swarm = require("./../swarm.js").at("http://swarm-gateways.net");
+const swarm = require("./../src/swarm.js").at("http://swarm-gateways.net");
 const path = require("path");
 
-swarm.uploadDirectoryFromDisk("/index.html", path.join(__dirname,"example_dapp"))
+swarm.uploadDirectoryFromDisk("/index.html", path.join(__dirname,"example_dapp_simple"))
   .then(console.log)
   .catch(console.log);
diff --git a/examples/data_download.js b/examples/data_download.js
@@ -1,7 +1,7 @@
 // Downloads raw data from the Swarm network. 
 // Outputs the downloaded data: "test"
 
-const swarm = require("./../swarm.js").at("http://swarm-gateways.net");
+const swarm = require("./../src/swarm.js").at("http://swarm-gateways.net");
 const hash = "c9a99c7d326dcc6316f32fe2625b311f6dc49a175e6877681ded93137d3569e7";
 
 swarm.download(hash)

diff --git a/examples/data_upload.js b/examples/data_upload.js
@@ -1,7 +1,7 @@
 // Uploads raw data to the Swarm network. 
 // Outputs the Swarm address: c9a99c7d326dcc6316f32fe2625b311f6dc49a175e6877681ded93137d3569e7
 
-const swarm = require("./../swarm.js").at("http://swarm-gateways.net");
+const swarm = require("./../src/swarm.js").at("http://swarm-gateways.net");
 
 swarm.upload(new Buffer("test"))
   .then(console.log)

diff --git a/examples/example_dapp/ethereum_icon.png → ...les/example_dapp_simple/ethereum_icon.png b/examples/example_dapp/ethereum_icon.png → ...les/example_dapp_simple/ethereum_icon.png
diff --git a/examples/example_dapp/foo/test_text_1.txt → ...s/example_dapp_simple/foo/test_text_1.txt b/examples/example_dapp/foo/test_text_1.txt → ...s/example_dapp_simple/foo/test_text_1.txt
diff --git a/examples/example_dapp/foo/test_text_2.txt → ...s/example_dapp_simple/foo/test_text_2.txt b/examples/example_dapp/foo/test_text_2.txt → ...s/example_dapp_simple/foo/test_text_2.txt
diff --git a/examples/example_dapp/index.html → examples/example_dapp_simple/index.html b/examples/example_dapp/index.html → examples/example_dapp_simple/index.html
diff --git a/examples/example_dapp_uploader/ethereum_icon.png b/examples/example_dapp_uploader/ethereum_icon.png
diff --git a/examples/example_dapp_uploader/index.html b/examples/example_dapp_uploader/index.html
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <title>Swarm.js Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="ethereum_icon.png">
+    <script src="swarm.min.js"></script>
+    <script src="index.js"></script>
+    <style> 
+      * { font-family: helvetica; }
+      input { width: 160px; }
+    </style>
+  <head>
+  <body>
+    <h3><img src="ethereum_icon.png"/> Swarm.js Demo</h3>
+
+    <p>Provider:
+      <input type="text" id="provider" value="http://swarm-gateways.net" onkeyup="setProvider()">
+      </input>
+    </p>
+
+    <p>
+      <button onclick="download()">Download</button>
+      <button onclick="upload()">Upload a File</button>
+      <button onclick="upload(true)">Upload a Directory</button>
+      <button onclick="upload(new Buffer(prompt('Text:')))">Upload a String</button>
+    </p>
+
+    <div id="output"></div>
+
+    <div>
+      <p><strong>Downloads to try:</strong></p>
+      <table>
+        <tr>
+          <td>Demo text</td>
+          <td>62cb02b7d506e24f347ba0e8029e24bac12c4c2edd80498c9cbe64c30b97b96b</td>
+        </tr>
+        <tr>
+          <td>Demo image</td>
+          <td>76b9b41b169cbe78cf92f4fa413065536051588db5b1dd052ed12c78754d1008</td>
+        </tr>
+        <tr>
+          <td>Demo directory</td>
+          <td>6c03d9a5591796c86b998ccde9b5f4e99a10daf9da640f47ccf8a60b87103d24</td>
+        </tr>
+      </table>
+      <p>This demo only interprets PNG, JPG and text. Any other binary is shown as a hex string.</p>
+    </div>
+  <body>
+</html>
diff --git a/examples/example_dapp_uploader/index.js b/examples/example_dapp_uploader/index.js
@@ -0,0 +1,75 @@
+let swarm = Swarm.at("http://swarm-gateways.net");
+
+// Uploads a file or directory to the Swarm network
+const upload = dir => {
+  swarm.upload(dir).then(print).catch(console.log);
+};
+
+// Downloads from Swarm and inserts on site
+const download = () => {
+  const hash = prompt("Hash:");
+  if (hash) swarm.download(hash).then(print).catch(console.log);
+};
+
+// Sets the Swarm provider / gateway
+const setProvider = e => {
+  swarm = Swarm.at(document.getElementById("provider").value);
+};
+
+// Pretty printers
+const print = val => {
+  let p = document.createElement("p");
+  let o = document.getElementById("output");
+  p.appendChild(toHTML(val));
+  o.insertBefore(p, o.firstChild);
+};
+
+// Interprets data as text/png/jpg/raw/directory, builds an HTML
+const toHTML = val => {
+  // Directory
+  if (val instanceof Object && !val.length) {
+    let table = document.createElement("table");
+    for (var key in val) {
+      let row = document.createElement("tr");
+      let cell0 = document.createElement("td");
+      let cell1 = document.createElement("td");
+      cell0.appendChild(toHTML(key));
+      cell1.appendChild(toHTML(val[key].data));
+      row.appendChild(cell0);
+      row.appendChild(cell1);
+      table.appendChild(row);
+    }
+    return table;
+
+  // String
+  } else if (typeof val === "string") {
+    let span = document.createElement("span");
+    span.innerHTML = val;
+    return span;
+
+  // Buffer
+  } else if (val.length) {
+    // PNG
+    if (val[1] === 80 && val[2] === 78 && val[3] === 71) {
+      let image = document.createElement("img");
+      image.src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null,val));
+      return image;
+
+    // JPG
+    } else if (val[0] === 0xFF && val[1] === 0xD8 && val[val.length-2] === 0xFF && val[val.length-1] === 0xD9) {
+      let image = document.createElement("img");
+      image.src = "data:image/jpg;base64," + btoa(String.fromCharCode.apply(null,val));
+      return image;
+
+    // Plain text / binary data
+    } else {
+      let isText = true;
+      for (let i = 0; i < val.length; ++i)
+        if (val[i] < 32 || val[i] > 126)
+          isText = false;
+      return toHTML(isText
+        ? [].map.call(val, c => String.fromCharCode(c)).join("")
+        : [].map.call(val, b => ("00"+b.toString(16)).slice(-2)).join(""));
+    };
+  };
+};