Allow to select multiple files at once from remote providers

src/generic-provider-views/Browser.js

@@ -17,7 +17,7 @@ module.exports = (props) => {
         <div class="Browser-search" aria-hidden="${!props.isSearchVisible}">
           <input type="text" class="Browser-searchInput" placeholder="Search"
                  onkeyup=${props.filterQuery} value="${props.filterInput}"/>
-          <button type="button" class="Browser-searchClose" 
+          <button type="button" class="Browser-searchClose"
                   onclick=${props.toggleSearch}>
             <svg class="UppyIcon" viewBox="0 0 19 19">
               <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z"/>
@@ -52,6 +52,8 @@ module.exports = (props) => {
           sortByDate: props.sortByDate,
           handleFileClick: props.addFile,
           handleFolderClick: props.getNextFolder,
+          isChecked: props.isChecked,
+          toggleCheckbox: props.toggleCheckbox,
           getItemName: props.getItemName,
           getItemIcon: props.getItemIcon,
           handleScroll: props.handleScroll,

src/generic-provider-views/Table.js

@@ -18,11 +18,19 @@ module.exports = (props) => {
     <table class="BrowserTable" onscroll=${props.handleScroll}>
       <tbody role="listbox" aria-label="List of files from ${props.title}">
         ${props.folders.map((folder) => {
+          let isDisabled = false
+          let isChecked = props.isChecked(folder)
+          if (isChecked) {
+            isDisabled = isChecked.loading
+          }
           return Row({
             title: props.getItemName(folder),
             active: props.activeRow(folder),
             getItemIcon: () => props.getItemIcon(folder),
             handleClick: () => props.handleFolderClick(folder),
+            isDisabled: isDisabled,
+            isChecked: isChecked,
+            handleCheckboxClick: (e) => props.toggleCheckbox(e, folder),
             columns: props.columns
           })
         })}
@@ -32,6 +40,9 @@ module.exports = (props) => {
             active: props.activeRow(file),
             getItemIcon: () => props.getItemIcon(file),
             handleClick: () => props.handleFileClick(file),
+            isDisabled: false,
+            isChecked: props.isChecked(file),
+            handleCheckboxClick: (e) => props.toggleCheckbox(e, file),
             columns: props.columns
           })
         })}

src/generic-provider-views/TableRow.js

@@ -9,6 +9,9 @@ module.exports = (props) => {
 
   return html`
     <tr onclick=${props.handleClick} onkeydown=${handleKeyDown} class=${classes} role="option" tabindex="0">
+      <td onclick=${props.handleCheckboxClick} class="BrowserTable-column">
+        <input type="checkbox" checked=${props.isChecked} disabled=${props.isDisabled} />
+      </td>
       ${Column({
         getItemIcon: props.getItemIcon,
         value: props.title

src/generic-provider-views/index.js

@@ -53,6 +53,7 @@ module.exports = class View {
     this.opts = Object.assign({}, defaultOptions, opts)
 
     // Logic
+    this.updateFolderState = this.updateFolderState.bind(this)
     this.addFile = this.addFile.bind(this)
     this.filterItems = this.filterItems.bind(this)
     this.filterQuery = this.filterQuery.bind(this)
@@ -66,13 +67,21 @@ module.exports = class View {
     this.sortByTitle = this.sortByTitle.bind(this)
     this.sortByDate = this.sortByDate.bind(this)
     this.isActiveRow = this.isActiveRow.bind(this)
+    this.isChecked = this.isChecked.bind(this)
+    this.toggleCheckbox = this.toggleCheckbox.bind(this)
     this.handleError = this.handleError.bind(this)
     this.handleScroll = this.handleScroll.bind(this)
 
+    this.plugin.core.on('core:file-removed', this.updateFolderState)
+
     // Visual
     this.render = this.render.bind(this)
   }
 
+  tearDown () {
+    this.plugin.core.off('core:file-removed', this.updateFolderState)
+  }
+
   /**
    * Little shorthand to update the state with the plugin's state
    */
@@ -144,9 +153,10 @@ module.exports = class View {
   getNextFolder (folder) {
     let id = this.plugin.getItemRequestPath(folder)
     this.getFolder(id, this.plugin.getItemName(folder))
+    this.lastCheckbox = undefined
   }
 
-  addFile (file) {
+  addFile (file, isCheckbox = false) {
     const tagFile = {
       source: this.plugin.id,
       data: this.plugin.getItemData(file),
@@ -171,6 +181,9 @@ module.exports = class View {
       }
       this.plugin.core.log('Adding remote file')
       this.plugin.core.addFile(tagFile)
+      if (!isCheckbox) {
+        this.plugin.core.getPlugin('Dashboard').hideAllPanels()
+      }
     })
   }
 
@@ -308,6 +321,165 @@ module.exports = class View {
     return this.plugin.core.getState()[this.plugin.stateId].activeRow === this.plugin.getItemId(file)
   }
 
+  isChecked (item) {
+    const itemId = this.providerFileToId(item)
+    if (this.plugin.isFolder(item)) {
+      const state = this.plugin.core.getState()[this.plugin.stateId]
+      const folders = state.selectedFolders || {}
+      if (itemId in folders) {
+        return folders[itemId]
+      }
+      return false
+    }
+    return (itemId in this.plugin.core.getState().files)
+  }
+
+  /**
+   * Adds all files found inside of specified folder.
+   *
+   * Uses separated state while folder contents are being fetched and
+   * mantains list of selected folders, which are separated from files.
+   */
+  addFolder (folder) {
+    const folderId = this.providerFileToId(folder)
+    let state = this.plugin.core.getState()[this.plugin.stateId]
+    let folders = state.selectedFolders || {}
+    if (folderId in folders && folders[folderId].loading) {
+      return
+    }
+    folders[folderId] = {loading: true, files: []}
+    this.updateState({selectedFolders: folders})
+    this.Provider.list(this.plugin.getItemRequestPath(folder)).then((res) => {
+      let files = []
+      this.plugin.getItemSubList(res).forEach((item) => {
+        if (!this.plugin.isFolder(item)) {
+          this.addFile(item, true)
+          files.push(this.providerFileToId(item))
+        }
+      })
+      state = this.plugin.core.getState()[this.plugin.stateId]
+      state.selectedFolders[folderId] = {loading: false, files: files}
+      this.updateState({selectedFolders: folders})
+      const dashboard = this.plugin.core.getPlugin('Dashboard')
+      let message
+      if (files.length) {
+        message = dashboard.i18n('folderAdded', {
+          smart_count: files.length, folder: this.plugin.getItemName(folder)
+        })
+      } else {
+        message = dashboard.i18n('emptyFolderAdded')
+      }
+      this.plugin.core.info(message)
+    }).catch((e) => {
+      state = this.plugin.core.getState()[this.plugin.stateId]
+      delete state.selectedFolders[folderId]
+      this.updateState({selectedFolders: state.selectedFolders})
+      this.handleError(e)
+    })
+  }
+
+  removeFolder (folderId) {
+    let state = this.plugin.core.getState()[this.plugin.stateId]
+    let folders = state.selectedFolders || {}
+    if (!(folderId in folders)) {
+      return
+    }
+    let folder = folders[folderId]
+    if (folder.loading) {
+      return
+    }
+    for (let fileId of folder.files) {
+      if (fileId in this.plugin.core.getState().files) {
+        this.plugin.core.removeFile(fileId)
+      }
+    }
+    delete folders[folderId]
+    this.updateState({selectedFolders: folders})
+  }
+
+  /**
+   * Updates selected folders state everytime file is being removed.
+   *
+   * Note that this is only important when files are getting removed from the
+   * main screen, and will do nothing when you uncheck folder directly, since
+   * it's already been done in removeFolder method.
+   */
+  updateFolderState (fileId) {
+    let state = this.plugin.core.getState()[this.plugin.stateId]
+    let folders = state.selectedFolders || {}
+    for (let folderId in folders) {
+      let folder = folders[folderId]
+      if (folder.loading) {
+        continue
+      }
+      let i = folder.files.indexOf(fileId)
+      if (i > -1) {
+        folder.files.splice(i, 1)
+      }
+      if (!folder.files.length) {
+        delete folders[folderId]
+      }
+    }
+    this.updateState({selectedFolders: folders})
+  }
+
+  /**
+   * Toggles file/folder checkbox to on/off state while updating files list.
+   *
+   * Note that some extra complexity comes from supporting shift+click to
+   * toggle multiple checkboxes at once, which is done by getting all files
+   * in between last checked file and current one, and applying an on/off state
+   * for all of them, depending on current file state.
+   */
+  toggleCheckbox (e, file) {
+    e.stopPropagation()
+    e.preventDefault()
+    let {folders, files, filterInput} = this.plugin.core.getState()[this.plugin.stateId]
+    let items = folders.concat(files)
+    if (filterInput !== '') {
+      items = this.filterItems(items)
+    }
+    let itemsToToggle = [file]
+    if (this.lastCheckbox && e.shiftKey) {
+      let prevIndex = items.indexOf(this.lastCheckbox)
+      let currentIndex = items.indexOf(file)
+      if (prevIndex < currentIndex) {
+        itemsToToggle = items.slice(prevIndex, currentIndex + 1)
+      } else {
+        itemsToToggle = items.slice(currentIndex, prevIndex + 1)
+      }
+    }
+    this.lastCheckbox = file
+    if (this.isChecked(file)) {
+      for (let item of itemsToToggle) {
+        const itemId = this.providerFileToId(item)
+        if (this.plugin.isFolder(item)) {
+          this.removeFolder(itemId)
+        } else {
+          if (itemId in this.plugin.core.getState().files) {
+            this.plugin.core.removeFile(itemId)
+          }
+        }
+      }
+    } else {
+      for (let item of itemsToToggle) {
+        if (this.plugin.isFolder(item)) {
+          this.addFolder(item)
+        } else {
+          this.addFile(item, true)
+        }
+      }
+    }
+  }
+
+  providerFileToId (file) {
+    return Utils.generateFileID({
+      data: this.plugin.getItemData(file),
+      name: this.plugin.getItemName(file) || this.plugin.getItemId(file),
+      type: this.plugin.getMimeType(file)
+    })
+  }
+
   handleDemoAuth () {
     const state = this.plugin.core.getState()[this.plugin.stateId]
     this.updateState({}, state, {
@@ -407,6 +579,8 @@ module.exports = class View {
       logout: this.logout,
       demo: this.plugin.opts.demo,
       isActiveRow: this.isActiveRow,
+      isChecked: this.isChecked,
+      toggleCheckbox: this.toggleCheckbox,
       getItemName: this.plugin.getItemName,
       getItemIcon: this.plugin.getItemIcon,
       handleScroll: this.handleScroll,

src/plugins/Dashboard/index.js

@@ -51,7 +51,12 @@ module.exports = class DashboardUI extends Plugin {
         browse: 'browse',
         fileProgress: 'File progress: upload speed and ETA',
         numberOfSelectedFiles: 'Number of selected files',
-        uploadAllNewFiles: 'Upload all new files'
+        uploadAllNewFiles: 'Upload all new files',
+        emptyFolderAdded: 'No files were added from empty folder',
+        folderAdded: {
+          0: 'Added %{smart_count} file from %{folder}',
+          1: 'Added %{smart_count} files from %{folder}'
+        }
       }
     }
 
@@ -80,7 +85,7 @@ module.exports = class DashboardUI extends Plugin {
     this.locale.strings = Object.assign({}, defaultLocale.strings, this.opts.locale.strings)
 
     this.translator = new Translator({locale: this.locale})
-    this.containerWidth = this.translator.translate.bind(this.translator)
+    this.i18n = this.translator.translate.bind(this.translator)
 
     this.closeModal = this.closeModal.bind(this)
     this.requestCloseModal = this.requestCloseModal.bind(this)
@@ -272,14 +277,12 @@ module.exports = class DashboardUI extends Plugin {
   }
 
   actions () {
-    this.core.on('core:file-added', this.hideAllPanels)
     this.core.on('dashboard:file-card', this.handleFileCard)
 
     window.addEventListener('resize', this.updateDashboardElWidth)
   }
 
   removeActions () {
-    this.core.off('core:file-added', this.hideAllPanels)
     this.core.off('dashboard:file-card', this.handleFileCard)
 
     window.removeEventListener('resize', this.updateDashboardElWidth)
@@ -420,7 +423,7 @@ module.exports = class DashboardUI extends Plugin {
       showPanel: this.showPanel,
       hideAllPanels: this.hideAllPanels,
       log: this.core.log,
-      i18n: this.containerWidth,
+      i18n: this.i18n,
       pauseAll: this.pauseAll,
       resumeAll: this.resumeAll,
       addFile: this.core.addFile,

src/plugins/Dropbox/index.js

@@ -65,6 +65,7 @@ module.exports = class Dropbox extends Plugin {
   }
 
   uninstall () {
+    this.view.tearDown()
     this.unmount()
   }
 

src/plugins/GoogleDrive/index.js

@@ -63,6 +63,7 @@ module.exports = class GoogleDrive extends Plugin {
   }
 
   uninstall () {
+    this.view.tearDown()
     this.unmount()
   }
 

src/plugins/Instagram/index.js

@@ -69,6 +69,7 @@ module.exports = class Instagram extends Plugin {
   }
 
   uninstall () {
+    this.view.tearDown()
     this.unmount()
   }
 

src/plugins/Plugin.js

@@ -1,5 +1,5 @@
 const yo = require('yo-yo')
-// const nanoraf = require('nanoraf')
+const nanoraf = require('nanoraf')
 const { findDOMElement } = require('../core/Utils')
 const getFormData = require('get-form-data')
 
@@ -62,15 +62,11 @@ module.exports = class Plugin {
 
     const targetElement = findDOMElement(target)
 
-    // Set up nanoraf.
-    // this.updateUI = nanoraf((state) => {
-    //   this.el = yo.update(this.el, this.render(state))
-    // })
-
     if (targetElement) {
-      this.updateUI = (state) => {
+      // Set up nanoraf.
+      this.updateUI = nanoraf((state) => {
         this.el = yo.update(this.el, this.render(state))
-      }
+      })
 
       this.core.log(`Installing ${callerPluginName} to a DOM element`)
 

src/scss/_provider.scss

@@ -318,6 +318,11 @@
   margin-right: 3px;
 }
 
+.BrowserTable-column input {
+  margin-top: 0;
+  cursor: pointer;
+}
+
 // .BrowserTable-itemButton {
 //   @include reset-button();
 //   cursor: pointer;