feat: Support wrapWithDirectory in Quick Upload

Implements #349 (for now only for external node)
ipfs · May 16, 2018 · 6fc89d6 · 6fc89d6
1 parent d6676ba
commit 6fc89d6
Show file tree

Hide file tree

Showing 7 changed files with 297 additions and 25 deletions.
diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
@@ -366,6 +366,14 @@
     "message": "drop it here to share",
     "description": "Partial info stats beneath the header on the share files page (quickUpload_drop_it_here)"
   },
+  "quickUpload_options_wrapWithDirectory": {
+    "message": "preserve the filename when adding a single item",
+    "description": "Checkbox label on the share files page (quickUpload_options_wrapWithDirectory)"
+  },
+  "quickUpload_options_pinUpload": {
+    "message": "resursively pin added data",
+    "description": "Checkbox label on the share files page (quickUpload_options_pinUpload)"
+  },
   "page_proxyAcl_title": {
     "message": "Manage Permissions",
     "description": "Page title for the IPFS proxy ACL page (page_proxyAcl_title)"

diff --git a/add-on/src/lib/ipfs-companion.js b/add-on/src/lib/ipfs-companion.js
@@ -219,7 +219,7 @@ module.exports = async function init () {
   // URL Uploader
   // -------------------------------------------------------------------
 
-  async function addFromURL (info) {
+  async function addFromURL (info, options) {
     const srcUrl = await findUrlForContext(info)
     let result
     try {
@@ -233,17 +233,19 @@ module.exports = async function init () {
         // console.log('addFromURL.fetchOptions', fetchOptions)
         const response = await fetch(srcUrl, fetchOptions)
         const blob = await response.blob()
-
         const buffer = await new Promise((resolve, reject) => {
           const reader = new FileReader()
           reader.onloadend = () => resolve(Buffer.from(reader.result))
           reader.onerror = reject
           reader.readAsArrayBuffer(blob)
         })
-
-        result = await ipfs.files.add(buffer)
+        const data = {
+          path: decodeURIComponent(new URL(response.url).pathname.split('/').pop()),
+          content: buffer
+        }
+        result = await ipfs.files.add(data, options)
       } else {
-        result = await ipfs.util.addFromURL(srcUrl)
+        result = await ipfs.util.addFromURL(srcUrl, options)
       }
     } catch (error) {
       console.error('Error in upload to IPFS context menu', error)
@@ -274,19 +276,25 @@ module.exports = async function init () {
     }
   }
 
-  function uploadResultHandler (result) {
-    result.forEach(function (file) {
+  async function uploadResultHandler (result) {
+    for (let file of result) {
       if (file && file.hash) {
         const {path, url} = getIpfsPathAndNativeAddress(file.hash)
-        browser.tabs.create({
-          'url': url
-        })
-        console.info('[ipfs-companion] successfully stored', path)
+        console.log('uploadResultHandler.file-' + result.indexOf(file), file)
+        // open the wrapping directory (or the CID if wrapping was disabled)
+        if (result.length === 1 || file.path === '' || file.path === file.hash) {
+          await browser.tabs.create({
+            'url': url
+          })
+        }
+        // preload every item
         if (state.preloadAtPublicGateway) {
           preloadAtPublicGateway(path)
         }
+        console.info('[ipfs-companion] successfully stored', file)
       }
-    })
+    }
+    return result
   }
 
   // Page-specific Actions
@@ -589,17 +597,16 @@ module.exports = async function init () {
       return ipfs
     },
 
-    async ipfsAddAndShow (buffer) {
+    async ipfsAddAndShow (data, options) {
       let result
       try {
-        result = await api.ipfs.files.add(buffer)
+        result = await api.ipfs.files.add(data, options)
       } catch (err) {
         console.error('Failed to IPFS add', err)
         notify('notify_uploadErrorTitle', 'notify_inlineErrorMsg', `${err.message}`)
         throw err
       }
-      uploadResultHandler(result)
-      return result
+      return uploadResultHandler(result)
     },
 
     async destroy () {

diff --git a/add-on/src/popup/quick-upload.css b/add-on/src/popup/quick-upload.css
@@ -1,4 +1,5 @@
 @import url('../../ui-kit/tachyons.css');
+@import url('../../ui-kit/ipfs.css');
 @import url('heartbeat.css');
 
 html, body, #root {
@@ -11,3 +12,32 @@ html, body, #root {
 .hover-inner-shadow:hover {
   box-shadow: inset 0 0 10px 5px rgba(211, 235, 237, 0.2);
 }
+
+.no-user-select {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Temporary CSS for custom checkbox (TODO: move/replace with ipfs-css */
+input[type='checkbox'] {
+  position: absolute;
+   opacity: 0;
+}
+.mark {
+  padding: .1em;
+  border: 1px #6ACAD1 solid;
+}
+label input ~ .mark  {
+  height: .9em;
+  width: .9em;
+}
+label input:checked ~ .mark  {
+  color: #79D6DF;
+  border: 1px #6ACAD1 solid;
+}
+label input:checked ~ .mark:after  {
+  content: '✔';
+  text-align: center;
+  vertical-align: middle;
+}
diff --git a/add-on/src/popup/quick-upload.html b/add-on/src/popup/quick-upload.html
@@ -2,7 +2,6 @@
 <html>
 
 <head>
-  <title>IPFS Upload</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" href="quick-upload.css">

diff --git a/add-on/src/popup/quick-upload.js b/add-on/src/popup/quick-upload.js
@@ -6,6 +6,8 @@ const choo = require('choo')
 const html = require('choo/html')
 const logo = require('./logo')
 
+document.title = browser.i18n.getMessage('panel_quickUpload')
+
 const app = choo()
 
 app.use(quickUploadStore)
@@ -16,6 +18,8 @@ function quickUploadStore (state, emitter) {
   state.message = ''
   state.peerCount = ''
   state.ipfsNodeType = 'external'
+  state.wrapWithDirectory = true
+  state.pinUpload = true
 
   function updateState ({ipfsNodeType, peerCount}) {
     state.ipfsNodeType = ipfsNodeType
@@ -48,7 +52,15 @@ function quickUploadStore (state, emitter) {
         reader.readAsArrayBuffer(file)
       })
 
-      await ipfsCompanion.ipfsAddAndShow(buffer)
+      const uploadOptions = {
+        wrapWithDirectory: state.wrapWithDirectory,
+        pin: state.pinUpload
+      }
+      const result = await ipfsCompanion.ipfsAddAndShow({
+        path: file.name,
+        content: buffer
+      }, uploadOptions)
+      console.log('Upload result', result)
 
       // close upload tab as it will be replaced with a new tab with uploaded content
       const tab = await browser.tabs.getCurrent()
@@ -64,12 +76,14 @@ function quickUploadStore (state, emitter) {
 
 function quickUploadPage (state, emit) {
   const onFileInputChange = (e) => emit('fileInputChange', e)
+  const onWrapWithDirectoryChange = (e) => { state.wrapWithDirectory = e.target.checked }
+  const onPinUploadChange = (e) => { state.pinUpload = e.target.checked }
   const {peerCount} = state
 
   return html`
-    <div class="avenir pt5" style="background: linear-gradient(to top, #041727 0%,#043b55 100%); height:100%;">
+    <div class="montserrat pt5" style="background: linear-gradient(to top, #041727 0%,#043b55 100%); height:100%;">
       <div class="mw8 center pa3 white">
-        <header class="flex items-center">
+        <header class="flex items-center no-user-select">
           ${logo({
             size: 80,
             path: '../../icons',
@@ -84,7 +98,7 @@ function quickUploadPage (state, emit) {
             </p>
           </div>
         </header>
-        <label for="quickUploadInput" class='db relative mv5 hover-inner-shadow' style="border:solid 2px #6ACAD1">
+        <label for="quickUploadInput" class='db relative mt5 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'>
@@ -101,6 +115,21 @@ function quickUploadPage (state, emit) {
             </div>
           </div>
         </label>
+         <!-- TODO: enable wrapping in embedded node after js-ipfs release -->
+        ${state.ipfsNodeType === 'external' ? html`
+          <div id='quickUploadOptions' class='sans-serif mt3 f6 lh-copy no-user-select' style='color: #6ACAD1'>
+              <label for='wrapWithDirectory' class='flex items-center db relative mt1 pointer'>
+                <input id='wrapWithDirectory' type='checkbox' onchange=${onWrapWithDirectoryChange} checked=${state.wrapWithDirectory} />
+                <span class='mark db flex items-center relative mr2 br2'></span>
+                ${browser.i18n.getMessage('quickUpload_options_wrapWithDirectory')}
+              </label>
+              <label for='pinUpload' class='flex items-center db relative mt1 pointer'>
+                <input id='pinUpload' type='checkbox' onchange=${onPinUploadChange} checked=${state.pinUpload} />
+                <span class='mark db flex items-center relative mr2 br2'></span>
+                ${browser.i18n.getMessage('quickUpload_options_pinUpload')}
+              </label>
+          </div>
+       ` : null}
       </div>
     </div>
   `

diff --git a/package.json b/package.json
@@ -94,7 +94,7 @@
     "doc-sniff": "1.0.1",
     "file-type": "7.6.0",
     "ipfs": "0.28.2",
-    "ipfs-api": "18.2.0",
+    "ipfs-api": "21.0.0",
     "ipfs-css": "0.3.0",
     "ipfs-postmsg-proxy": "2.16.0",
     "is-ipfs": "0.3.2",