feat(browserAction): Quick Upload PoC

Upload action opens temporary tab which in turn opens file picker. There are two hacks/workarounds: 1) Upload is done in temporary tab due to WebExtension bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1292701 2) Browserified Buffer is included twice because ipfs.add expects it BUT js-ipfs-api does not seem to expose own embedded version: ipfs-inactive/js-ipfs-http-client#528 Anyway, this cool PoC closes #184
ipfs · Feb 26, 2017 · 040444d · 040444d
1 parent 4f57f25
commit 040444d
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 37 deletions.
diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
@@ -92,6 +92,9 @@
   "panel_status-swarm-peers": {
     "message": "swarm peers"
   },
+  "panel_quick-upload": {
+    "message": "Quick Upload"
+  },
   "panel_open-webui": {
     "message": "Open WebUI"
   },

diff --git a/add-on/_locales/pl_PL/messages.json b/add-on/_locales/pl_PL/messages.json
@@ -92,6 +92,9 @@
   "panel_status-swarm-peers": {
     "message": "połączenia"
   },
+  "panel_quick-upload": {
+    "message": "Opublikuj plik"
+  },
   "panel_open-webui": {
     "message": "Otwórz WebUI"
   },

diff --git a/add-on/src/popup/browser-action.css b/add-on/src/popup/browser-action.css
@@ -67,11 +67,10 @@ li.action:active {
     float: right;
 }
 
-#pin-current-ipfs-address,
-#unpin-current-ipfs-address,
-#enable-gateway-redirect,
-#disable-gateway-redirect,
-#redirect-enabled,
-#redirect-disabled {
-    display: none;
+#quick-upload {
+    font-weight: bold;
+}
+
+.hidden {
+    display: none !important;
 }
diff --git a/add-on/src/popup/browser-action.html b/add-on/src/popup/browser-action.html
@@ -12,7 +12,7 @@
     <li id="gateway-address"><span data-i18n="panel_status-gateway-address"></span><span id="gateway-address-val">unknown</span></li>
     <li id="gateway-version"><span data-i18n="panel_status-gateway-version"></span><span id="gateway-version-val">offline</span></li>
     <li id="swarm-peers"><span data-i18n="panel_status-swarm-peers"></span><span id="swarm-peers-val">offline</span></li>
-    <li id="gateway-redirect"> <span data-i18n="panel_status-gateway-redirect"></span>
+    <li id="gateway-redirect"><span data-i18n="panel_status-gateway-redirect"></span>
       <span>
         <span id="redirect-enabled" data-i18n="panel_status-gateway-redirect-enabled"></span>
         <span id="redirect-disabled" data-i18n="panel_status-gateway-redirect-disabled"></span>
@@ -22,7 +22,7 @@
   </div>
 
   <ul id="operations">
-    <li class="action" id="quick-upload"><label for="quickUploadInput" data-i18n="panel_quick-upload"></label><input type="file" id="quickUploadInput" style="display: none" /></li>
+    <li class="action" id="quick-upload" data-i18n="panel_quick-upload"></li>
     <li class="action" id="open-webui" data-i18n="panel_open-webui"></li>
     <li class="action" id="open-preferences" data-i18n="panel_open-preferences"></li>
     <li class="action" id="toggle-gateway-redirect">

diff --git a/add-on/src/popup/browser-action.js b/add-on/src/popup/browser-action.js
@@ -6,44 +6,25 @@ const disableRedirect = document.getElementById('disable-gateway-redirect')
 const openWebUI = document.getElementById('open-webui')
 const openPreferences = document.getElementById('open-preferences')
 const quickUpload = document.getElementById('quick-upload')
-const quickUploadInput = document.getElementById('quickUploadInput')
 
 const ipfsIcon = document.getElementById('icon')
 const ipfsIconOn = '../../icons/ipfs-logo-on.svg'
 const ipfsIconOff = '../../icons/ipfs-logo-off.svg'
 const offline = 'offline'
 
 function show (id) {
-  document.getElementById(id).style.display = 'inline-block'
+  document.getElementById(id).classList.remove('hidden')
 }
 
 function hide (id) {
-  document.getElementById(id).style.display = 'none'
+  document.getElementById(id).classList.add('hidden')
 }
 
 function set (id, value) {
   document.getElementById(id).innerHTML = value
 }
 
-function onQuickUploadInputChange () {
-  browser.runtime.getBackgroundPage()
-    .then(bg => {
-      bg.ipfs.add(new Buffer(quickUploadInput.value), bg.uploadResultHandler)
-    })
-    .catch(error => { console.error(`Unable to perform quick upload due to ${error}`) })
-}
-
-function updateQuickUpload (enabled) {
-  if (enabled) {
-    quickUploadInput.onchange = onQuickUploadInputChange
-    quickUpload.style.opacity = 1
-    quickUploadInput.disabled = undefined
-  } else {
-    quickUploadInput.onchange = undefined
-    quickUpload.style.opacity = 0.5
-    quickUploadInput.disabled = 'disabled'
-  }
-}
+quickUpload.onclick = () => browser.tabs.create({ url: browser.extension.getURL('src/popup/quick-upload.html') })
 
 enableRedirect.onclick = () => browser.storage.local.set({useCustomGateway: true})
   .then(updatePopup)
@@ -108,8 +89,11 @@ function updatePopup () {
             // update peer counter
             set('swarm-peers-val', peerCount < 0 ? offline : peerCount)
             ipfsIcon.src = peerCount > 0 ? ipfsIconOn : ipfsIconOff
-            // enable/disable quick upload
-            updateQuickUpload(peerCount > 0)
+            if (peerCount > 0) {
+              show('quick-upload')
+            } else {
+              hide('quick-upload')
+            }
           })
           .catch(error => {
             console.error(`Unable update peer count due to ${error}`)

diff --git a/add-on/src/popup/page-action.js b/add-on/src/popup/page-action.js
@@ -7,7 +7,11 @@ const copyIpfsAddress = document.getElementById('copy-current-ipfs-address')
 const copyPublicGwAddress = document.getElementById('copy-current-public-gw-url')
 
 function show (element) {
-  element.style.display = 'block'
+  element.classList.remove('hidden')
+}
+
+function hide (element) {
+  element.classList.add('hidden')
 }
 
 function copyTextToClipboard (copyText) {
@@ -88,4 +92,6 @@ function initPageAction () {
     })
 }
 
+hide(pinResource)
+hide(unpinResource)
 document.addEventListener('DOMContentLoaded', initPageAction)
diff --git a/add-on/src/popup/quick-upload.html b/add-on/src/popup/quick-upload.html
@@ -0,0 +1,18 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="browser-action.css"/>
+</head>
+
+<body>
+  <img src="../../icons/ipfs-logo-on.svg" id="icon"/>
+  <p>
+    <span id="quickUploadMessage" data-i18n="panel_quick-upload"></span><input type="file" id="quickUploadInput" style="display: none" />
+  </p>
+  <script src="../lib/data-i18n.js"></script>
+  <script src="../lib/npm/buffer.js"></script>
+  <script src="quick-upload.js"></script>
+</body>
+
+</html>
diff --git a/add-on/src/popup/quick-upload.js b/add-on/src/popup/quick-upload.js
@@ -0,0 +1,39 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const Buffer = window.Buffer.Buffer // workaround for https://github.com/ipfs/js-ipfs-api/issues/528
+const quickUploadInput = document.getElementById('quickUploadInput')
+const quickUploadMessage = document.getElementById('quickUploadMessage')
+
+function onQuickUploadInputChange (event) {
+  const file = event.target.files[0]
+  browser.runtime.getBackgroundPage()
+    .then(bg => {
+      let reader = new FileReader()
+      reader.onloadend = () => {
+        const buffer = Buffer.from(reader.result)
+        bg.ipfs.add(buffer, (err, result) => {
+          if (err || !result) {
+            // keep upload tab and display error message in it
+            quickUploadMessage.innerHTML = `Unable to upload to IPFS API: <br><code><pre>${err}</pre></code>`
+          } else {
+            // close upload tab as it will be replaced with a new tab with uploaded content
+            browser.tabs.getCurrent().then(tab => {
+              browser.tabs.remove(tab.id)
+            })
+          }
+          // execute handler
+          return bg.uploadResultHandler(err, result)
+        })
+      }
+      reader.readAsArrayBuffer(file)
+    })
+    .catch(error => { console.error(`Unable to perform quick upload due to ${error}`) })
+}
+
+function initUpload () {
+  quickUploadInput.onchange = onQuickUploadInputChange
+  quickUploadInput.click()
+}
+
+document.addEventListener('DOMContentLoaded', initUpload)
diff --git a/package.json b/package.json
@@ -10,9 +10,10 @@
     "start": "run-s clean build test firefox",
     "clean": "shx rm -f add-on/src/lib/npm/*.js build/*.zip",
     "build": "run-s clean build:*",
-    "build:copy-is-ipfs-lib": "cp node_modules/is-ipfs/dist/index.min.js add-on/src/lib/npm/is-ipfs.min.js",
-    "build:copy-ipfs-api-lib": "cp node_modules/ipfs-api/dist/index.min.js add-on/src/lib/npm/ipfs-api.min.js",
-    "build:copy-lru-map-lib": "cp node_modules/lru_map/lru.js add-on/src/lib/npm/lru.js",
+    "build:copy-is-ipfs-lib": "shx cp node_modules/is-ipfs/dist/index.min.js add-on/src/lib/npm/is-ipfs.min.js",
+    "build:copy-ipfs-api-lib": "shx cp node_modules/ipfs-api/dist/index.min.js add-on/src/lib/npm/ipfs-api.min.js",
+    "build:copy-buffer-lib": "browserify -t brfs -r buffer -s Buffer -o add-on/src/lib/npm/buffer.js",
+    "build:copy-lru-map-lib": "shx cp node_modules/lru_map/lru.js add-on/src/lib/npm/lru.js",
     "build:bundle-extension": "web-ext build -s add-on/ -a build/",
     "test": "run-s test:*",
     "test:unit": "cross-env NODE_ENV=test karma start",
@@ -34,6 +35,7 @@
     ]
   },
   "devDependencies": {
+    "browserify": "14.1.0",
     "chai": "3.5.0",
     "cross-env": "3.1.4",
     "fakefile": "0.0.8",
@@ -63,6 +65,7 @@
   "dependencies": {
     "ipfs-api": "12.1.7",
     "is-ipfs": "0.3.0",
+    "buffer": "5.0.5",
     "lru_map": "0.3.2"
   }
 }