web3-storage · alanshaw · Feb 24, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022
@@ -0,0 +1,16 @@
+# web3.storage in the browser from a CDN
+
+A demo using the [`web3.storage`](https://www.npmjs.com/package/web3.storage) client in the browser to pre-calculate the CID for an asset then store it on web3.storage.
+
+Content addressing, IPFS, Filecoin, web3.storage... it's all pretty rad! Here is gateway URL for the Content ID of this example, (stored via web3.storage of course!) so you can check it out in your browser! https://dweb.link/ipfs/bafybeic5r5yxjh5xpmeczfp34ysrjcoa66pllnjgffahopzrl5yhex7d7i
+
+## Getting started
+
+Open `index.html` in your favourite browser and add your files 🚀. 
+
+You need an API token, which you can get by signing in to web3.storage, and clicking "Create an API token"
+
+## Screenshot
+
+![screenshot of the browser demo](https://user-images.githubusercontent.com/58871/127395300-331a21cf-90ab-4471-93e3-5c7e289ce321.png)
+
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>web3.storage</title>
+    <style>
+      body {
+        font-size: 16px;
+        font-family: -apple-system, system-ui;
+        padding: 0;
+        margin: 0;
+      }
+      form {
+        width: 500px;
+        padding: 16px;
+        max-width: 100%;
+        display: block;
+        margin: 0 auto;
+        color:#333;
+      }
+      label {
+        display: block;
+        padding: 32px 0 8px;
+        font-weight: 700;
+      }
+      #token {
+        width: 100%;
+        padding: 4px;
+        font-size: 1.2rem;
+      }
+      #output {
+        display: block;
+        padding: 16px;
+        margin: 0;
+        color: lime;
+        background:#222;
+        font-family: Courier New, ui-monospace, monospace;
+        font-weight: 500;
+        line-height: 1.6;
+        position: fixed;
+        bottom: 0;
+        height: 33.3%;
+        width: 100%;
+        overflow-y: scroll;
+      }
+      #output a {
+        color: aqua
+      }
+      input[type=submit] {
+        display: block;
+        padding: 4px 16px;
+        font-weight: 700;
+        font-size: 16px;
+        margin-top: 32px;
+      }
+      h1 {
+        text-align: center;
+        font-size: 24px;
+      }
+      h1 span {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>⁂
+        <span>web3.storage</span>
+      </h1>
+    </header>
+    <form id="upload-form">
+      <label for="token">Paste your web3.storage API token here</label>
+      <input type="password" id="token" required />
+      <label>Pick files to store</label>
+      <input type="file" id="filepicker" name="fileList" multiple required />
+      <input type="submit" value="Submit" id="submit" />
+    </form>
+    <div id="output"></div>
+    <script type="module">
+      import { Web3Storage } from 'https://cdn.jsdelivr.net/npm/web3.storage/dist/bundle.esm.min.js'
+
+      const form = document.querySelector('#upload-form')
+      const filepicker = document.querySelector('#filepicker')
+      const tokenInput = document.querySelector('#token')
+      const output = document.querySelector('#output')
+
+      showMessage('> ⁂ waiting for form submission...')
+
+      form.addEventListener('submit', async function (event) {
+        // don't reload the page!
+        event.preventDefault()
+
+        showMessage('> 📦 creating web3.storage client')
+        const token = tokenInput.value
+        const client = new Web3Storage({ token })
+
+        showMessage('> 🤖 chunking and hashing the files (in your browser!) to calculate the Content ID')
+        const files = filepicker.files
+        const cid = await client.put(files, {
+          onRootCidReady: (localCid) => {
+            showMessage(`> 🔑 locally calculated Content ID: ${localCid} `)
+            showMessage('> 📡 sending files to web3.storage ')
+          },
+          onStoredChunk: (bytes) => showMessage(`> 🛰 sent ${bytes.toLocaleString()} bytes to web3.storage`)
+        })
+        showMessage(`> ✅ web3.storage now hosting ${cid}`)
+        showLink(`https://dweb.link/ipfs/${cid}`)
+      }, false)
+
+      function showMessage (text) {
+        const node = document.createElement('div')
+        node.innerText = text
+        output.appendChild(node)
+      }
+
+      function showLink (url) {
+        const node = document.createElement('a')
+        node.href = url
+        node.innerText = `> 🔗 ${url}`
+        output.appendChild(node)
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -34,6 +34,7 @@
     "@web-std/blob": "^3.0.1",
     "@web-std/fetch": "^3.0.0",
     "@web-std/file": "^3.0.0",
+    "@web3-storage/parse-link-header": "^3.1.0",
     "browser-readablestream-to-it": "^1.0.3",
     "carbites": "^1.0.6",
     "cborg": "^1.6.0",
@@ -42,7 +43,6 @@
     "ipns": "^0.16.0",
     "libp2p-crypto": "^0.21.0",
     "p-retry": "^4.5.0",
-    "parse-link-header": "^2.0.0",
     "streaming-iterables": "^6.0.0",
     "uint8arrays": "^3.0.0"
   },
@@ -52,7 +52,6 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/mocha": "9.0.0",
-    "@types/parse-link-header": "^1.0.1",
     "bundlesize": "^0.18.1",
     "cors": "^2.8.5",
     "del-cli": "^4.0.0",

diff --git a/packages/client/src/lib.js b/packages/client/src/lib.js
@@ -16,7 +16,7 @@
 import { transform } from 'streaming-iterables'
 import pRetry from 'p-retry'
 import { pack } from 'ipfs-car/pack'
-import parseLink from 'parse-link-header'
+import { parseLinkHeader } from '@web3-storage/parse-link-header'
 import { unpackStream } from 'ipfs-car/unpack'
 import { TreewalkCarSplitter } from 'carbites/treewalk'
 import { CarReader } from '@ipld/car'
@@ -469,13 +469,13 @@ function toWeb3Response (res) {
 async function * paginator (fn, service, opts) {
   let res = await fn(service, opts)
   yield res
-  let link = parseLink(res.headers.get('Link') || '')
+  let link = parseLinkHeader(res.headers.get('Link') || '')
   // @ts-ignore
   while (link && link.next) {
     // @ts-ignore
     res = await fn(service, link.next)
     yield res
-    link = parseLink(res.headers.get('Link') || '')
+    link = parseLinkHeader(res.headers.get('Link') || '')
   }
 }