Nice "Share files via IPFS" with file drop.

add-on/_locales/en/messages.json

@@ -295,5 +295,38 @@
   "manifest_extensionDescription": {
     "message": "Browser extension that simplifies access to IPFS resources",
     "description": "Extension description in the Manifest file"
+  },
+  "quickUpload_subhead_peers_and_files": {
+    "message": "Connected to $PEERCOUNT$ peers and sharing $FILESCOUNT$ files",
+    "description": "Info stats beneath the header on the share files page",
+    "placeholders": {
+      "peerCount": {
+        "content": "$1"
+      },
+      "filesCount": {
+        "content": "$2"
+      }
+    }
+  },
+  "quickUpload_subhead_peers": {
+    "message": "Connected to $PEERCOUNT$ peers",
+    "description": "Partial info stats beneath the header on the share files page",
+    "placeholders": {
+      "peerCount": {
+        "content": "$1"
+      }
+    }
+  },
+  "quickUpload_pick_file_button": {
+    "message": "Pick a file",
+    "description": "Text on the 'pick a file' button"
+  },
+  "quickUpload_or": {
+    "message": "or",
+    "description": "seperates the pick a file button from the drop message"
+  },
+  "quickUpload_drop_it_here": {
+    "message": "drop it here to share",
+    "description": "Partial info stats beneath the header on the share files page"
   }
 }

add-on/src/lib/ipfs-companion.js

@@ -149,6 +149,7 @@ module.exports = async function init () {
       const info = {
         ipfsNodeType: state.ipfsNodeType,
         peerCount: state.peerCount,
+        repoStats: state.repoStats,
         gwURLString: state.gwURLString,
         pubGwURLString: state.pubGwURLString,
         currentTab: await browser.tabs.query({active: true, currentWindow: true}).then(tabs => tabs[0])
@@ -342,6 +343,7 @@ module.exports = async function init () {
   async function apiStatusUpdate () {
     let oldPeerCount = state.peerCount
     state.peerCount = await getSwarmPeerCount()
+    state.repoStats = await getRepoStats()
     updatePeerCountDependentStates(oldPeerCount, state.peerCount)
     sendStatusUpdateToBrowserAction()
   }
@@ -357,11 +359,22 @@ module.exports = async function init () {
       const peerInfos = await ipfs.swarm.peers()
       return peerInfos.length
     } catch (error) {
-      // console.error(`Error while ipfs.swarm.peers: ${err}`)
+      console.error(`Error while ipfs.swarm.peers: ${error}`)
       return offlinePeerCount
     }
   }
 
+  async function getRepoStats () {
+    if (!ipfs.stats || !ipfs.stats.repo) return {}
+    try {
+      const repoStats = await ipfs.stats.repo()
+      return repoStats
+    } catch (error) {
+      console.error(`Error while ipfs.stats.repo: ${error}`)
+      return {}
+    }
+  }
+
   async function runIfNotIdle (action) {
     try {
       const state = await browser.idle.queryState(idleInSecs)

add-on/src/popup/quick-upload.css

@@ -2,4 +2,11 @@
 
 html, body, #root {
   height: 100%;
-}
+}
+
+.hover-inner-shadow {
+  transition: box-shadow 0.2s ease-in-out;
+}
+.hover-inner-shadow:hover {
+  box-shadow: inset 0 0 10px 5px rgba(211, 235, 237, 0.2);
+}

add-on/src/popup/quick-upload.js

@@ -16,8 +16,32 @@ app.mount('#root')
 
 function quickUploadStore (state, emitter) {
   state.message = ''
-  state.peerCount = 8
-  state.ipfsNodeType = 'embedded'
+  state.peerCount = ''
+  state.filesCount = ''
+  state.repoSize = ''
+  state.ipfsNodeType = 'external'
+
+  function updateState ({ipfsNodeType, peerCount, repoStats = {}}) {
+    state.ipfsNodeType = ipfsNodeType
+    state.peerCount = peerCount
+    state.filesCount = repoStats.NumObjects || ''
+    const repoSizeInMB = ((repoStats.RepoSize || 0) / 1000000)
+    state.repoSize = `${repoSizeInMB}MB`
+  }
+
+  let port
+
+  emitter.on('DOMContentLoaded', async () => {
+    // initialize connection to the background script which will trigger UI updates
+    port = browser.runtime.connect({name: 'browser-action-port'})
+    port.onMessage.addListener(async (message) => {
+      if (message.statusUpdate) {
+        console.log('In browser action, received message from background:', message)
+        updateState(message.statusUpdate)
+        emitter.emit('render')
+      }
+    })
+  })
 
   emitter.on('fileInputChange', async (event) => {
     const file = event.target.files[0]
@@ -47,23 +71,49 @@ function quickUploadStore (state, emitter) {
 
 function quickUploadPage (state, emit) {
   const onFileInputChange = (e) => emit('fileInputChange', e)
-
+  const {filesCount, peerCount} = state
+  let subhead = ''
+  if (filesCount && peerCount) {
+    subhead = browser.i18n.getMessage('quickUpload_subhead_peers_and_files', [peerCount, filesCount])
+  }
+  if (!filesCount && peerCount) {
+    subhead = browser.i18n.getMessage('quickUpload_subhead_peers', [peerCount])
+  }
   return html`
-    <div class="helvetica white pt3" style="background: linear-gradient(to bottom, #041727 0%,#043b55 100%); height:100%;">
-      <div class="measure-wide center pa3 tc">
-        ${logo({
-          size: 100,
-          path: '../../icons',
-          heartbeat: false
-        })}
-        <h1 id="quickUploadMessage" class='mb1'>
-          ${browser.i18n.getMessage('panel_quickUpload')}
-        </h1>
-        <p id="form">
-          <input type="file" id="quickUploadInput" onchange=${onFileInputChange} />
-          <br>
-          ${state.message}
-        </p>
+    <div class="avenir pt5" style="background: linear-gradient(to top, #041727 0%,#043b55 100%); height:100%;">
+      <div class="mw8 center pa3 white">
+        <header class="flex items-center">
+          ${logo({
+            size: 80,
+            path: '../../icons',
+            heartbeat: false
+          })}
+          <div class="pl3">
+            <h1 class="f2 fw5 ma0">
+              ${browser.i18n.getMessage('panel_quickUpload')}
+            </h1>
+            <p class="f3 fw2 lh-copy ma0 light-gray">
+              ${subhead}
+            </p>
+          </div>
+        </header>
+        <label for="quickUploadInput" class='db relative mv5 hover-inner-shadow' style="border:solid 2px #6ACAD1">
+          <input class="db absolute pointer w-100 h-100 top-0 o-0" type="file" id="quickUploadInput" onchange=${onFileInputChange} />
+          <div class='dt dim' style='padding-left: 100px; height: 300px'>
+            <div class='dtc v-mid'>
+              <span class="f3 link dim br1 ph4 pv3 dib white" style="background: #6ACAD1">
+                ${browser.i18n.getMessage('quickUpload_pick_file_button')}
+              </span>
+              <span class='f3'>
+                <emph class='underline pl3 pr2 moon-gray'>
+                  ${browser.i18n.getMessage('quickUpload_or')}
+                </emph>
+                ${browser.i18n.getMessage('quickUpload_drop_it_here')}
+              </span>
+              <p class='f4'>${state.message}</p>
+            </div>
+          </div>
+        </label>
       </div>
     </div>
   `

package.json

@@ -73,7 +73,7 @@
     "doc-sniff": "1.0.1",
     "file-type": "7.3.0",
     "ipfs": "0.27.3",
-    "ipfs-api": "17.1.3",
+    "ipfs-api": "17.2.4",
     "is-ipfs": "0.3.2",
     "is-svg": "2.1.0",
     "lru_map": "0.3.3",

yarn.lock

@@ -4115,42 +4115,7 @@ ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
-ipfs-api@17.1.3:
-  version "17.1.3"
-  resolved "https://registry.yarnpkg.com/ipfs-api/-/ipfs-api-17.1.3.tgz#bc4cd0f6991c9b7f6e70bf665a5fb119ed4b5e3c"
-  dependencies:
-    async "^2.6.0"
-    bs58 "^4.0.1"
-    cids "~0.5.2"
-    concat-stream "^1.6.0"
-    detect-node "^2.0.3"
-    flatmap "0.0.3"
-    glob "^7.1.2"
-    glob-escape "0.0.2"
-    ipfs-block "~0.6.1"
-    ipfs-unixfs "~0.1.14"
-    ipld-dag-pb "~0.11.3"
-    is-ipfs "^0.3.2"
-    is-stream "^1.1.0"
-    lru-cache "^4.1.1"
-    multiaddr "^3.0.1"
-    multihashes "~0.4.12"
-    ndjson "^1.5.0"
-    once "^1.4.0"
-    peer-id "~0.10.2"
-    peer-info "~0.11.1"
-    promisify-es6 "^1.0.3"
-    pull-defer "^0.2.2"
-    pull-pushable "^2.1.1"
-    pump "^1.0.3"
-    qs "^6.5.1"
-    readable-stream "^2.3.3"
-    stream-http "^2.7.2"
-    stream-to-pull-stream "^1.7.2"
-    streamifier "^0.1.1"
-    tar-stream "^1.5.5"
-
-ipfs-api@^17.2.4:
+ipfs-api@17.2.4, ipfs-api@^17.2.4:
   version "17.2.4"
   resolved "https://registry.yarnpkg.com/ipfs-api/-/ipfs-api-17.2.4.tgz#8130a5fa98e15b2af8f6a27b71442cebafc89b24"
   dependencies: