Allow to select multiple files at once from remote providers

src/core/Core.js

@@ -338,6 +338,7 @@ class Uppy {
           },
           size: file.data.size || 'N/A',
           isRemote: isRemote,
+          isCheckbox: file.isCheckbox,
           remote: file.remote || '',
           preview: file.preview
         }

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,
+          removeFile: props.removeFile,
           getItemName: props.getItemName,
           getItemIcon: props.getItemIcon,
           handleScroll: props.handleScroll

src/generic-provider-views/Table.js

@@ -23,6 +23,9 @@ module.exports = (props) => {
             active: props.activeRow(folder),
             getItemIcon: () => props.getItemIcon(folder),
             handleClick: () => props.handleFolderClick(folder),
+            isChecked: props.isChecked(folder),
+            removeFile: () => props.removeFile(folder),
+            handleCheckboxClick: () => props.handleFileClick(folder, true),
             columns: props.columns
           })
         })}
@@ -32,6 +35,9 @@ module.exports = (props) => {
             active: props.activeRow(file),
             getItemIcon: () => props.getItemIcon(file),
             handleClick: () => props.handleFileClick(file),
+            isChecked: props.isChecked(file),
+            removeFile: () => props.removeFile(file),
+            handleCheckboxClick: () => props.handleFileClick(file, true),
             columns: props.columns
           })
         })}

src/generic-provider-views/TableRow.js

@@ -1,10 +1,22 @@
 const html = require('yo-yo')
 const Column = require('./TableColumn')
 
+const toggleCheckbox = (e, props) => {
+  e.stopPropagation()
+  if (props.isChecked) {
+    props.removeFile()
+  } else {
+    props.handleCheckboxClick(e)
+  }
+}
+
 module.exports = (props) => {
   const classes = props.active ? 'BrowserTable-row is-active' : 'BrowserTable-row'
   return html`
     <tr onclick=${props.handleClick} class=${classes}>
+      <td onclick=${(e) => toggleCheckbox(e, props)} class="BrowserTable-column">
+        <input type="checkbox" checked=${props.isChecked} />
+      </td>
       ${Column({
         getItemIcon: props.getItemIcon,
         value: props.title

src/generic-provider-views/index.js

@@ -66,6 +66,8 @@ 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.removeFile = this.removeFile.bind(this)
     this.handleError = this.handleError.bind(this)
     this.handleScroll = this.handleScroll.bind(this)
 
@@ -146,13 +148,14 @@ module.exports = class View {
     this.getFolder(id, this.plugin.getItemName(folder))
   }
 
-  addFile (file) {
+  addFile (file, isCheckbox=false) {
     const tagFile = {
       source: this.plugin.id,
       data: this.plugin.getItemData(file),
       name: this.plugin.getItemName(file) || this.plugin.getItemId(file),
       type: this.plugin.getMimeType(file),
       isRemote: true,
+      isCheckbox: isCheckbox,
       body: {
         fileId: this.plugin.getItemId(file)
       },
@@ -308,6 +311,23 @@ module.exports = class View {
     return this.plugin.core.getState()[this.plugin.stateId].activeRow === this.plugin.getItemId(file)
   }
 
+  isChecked (file) {
+    const fileId = Utils.generateFileID({
+      data: this.plugin.getItemData(file),
+      name: this.plugin.getItemName(file) || this.plugin.getItemId(file),
+      type: this.plugin.getMimeType(file),
+    })
+    return (fileId in this.plugin.core.getState().files)
+  }
+
+  removeFile (file) {
+    this.plugin.core.removeFile(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 +427,8 @@ module.exports = class View {
       logout: this.logout,
       demo: this.plugin.opts.demo,
       isActiveRow: this.isActiveRow,
+      isChecked: this.isChecked,
+      removeFile: this.removeFile,
       getItemName: this.plugin.getItemName,
       getItemIcon: this.plugin.getItemIcon,
       handleScroll: this.handleScroll,

src/plugins/Dashboard/index.js

@@ -121,10 +121,12 @@ module.exports = class DashboardUI extends Plugin {
     return this.target
   }
 
-  hideAllPanels () {
-    this.setPluginState({
-      activePanel: false
-    })
+  hideAllPanels (file) {
+    if (!file.isCheckbox) {
+      this.setPluginState({
+        activePanel: false
+      })
+    }
   }
 
   showPanel (id) {

src/scss/_provider.scss

@@ -418,6 +418,10 @@
   margin-right: 3px;
 }
 
+.BrowserTable-column input {
+  margin-top: 0;
+}
+
 .BrowserTable-headerColumn {
   cursor: pointer;
   text-align: left;