Refactor, autoProceed in ProgressDrawer

src/plugins/DragDrop.js

@@ -27,9 +27,6 @@ export default class DragDrop extends Plugin {
     // Merge default options with the ones set by user
     this.opts = Object.assign({}, defaultOptions, opts)
 
-    // Array of selected files
-    this.files = []
-
     // Check for browser dragDrop support
     this.isDragDropSupported = this.checkDragDropSupport()
 

src/plugins/Plugin.js

@@ -32,46 +32,12 @@ export default class Plugin {
     } else {
       // this.core.log('plugin is a target')
       let targetPlugin = this.core.getPlugin(target.name)
-      let selectorTarget = targetPlugin.prepareTarget(callerPlugin, el)
+      let selectorTarget = targetPlugin.addTarget(callerPlugin, el)
 
       return selectorTarget
     }
   }
 
-  extractFiles (results) {
-    console.log({
-      class: 'Plugin',
-      method: 'extractFiles',
-      results: results
-    })
-
-    // check if the results array is empty
-    // if (!results || !results.count) {
-    //   return results
-    // }
-
-    const files = []
-    results.forEach((result) => {
-      try {
-        Array.from(result.files).forEach((file) => files.push(file))
-      } catch (e) {
-        console.log(e)
-      }
-    })
-
-    // const files = [];
-    // for (let i in results) {
-    //   for (let j in results[i].files) {
-    //     files.push(results[i].files.item(j));
-    //   for (let j in results[i].files) {
-    //     // files.push(results[i].files.item(j));
-    //   }
-    // }
-
-    // return Array.from(fileList);
-    return files
-  }
-
   focus () {
     console.log('focus pocus!')
     return

src/plugins/ProgressDrawer.js

@@ -29,6 +29,7 @@ export default class ProgressDrawer extends Plugin {
     const selectedFiles = state.selectedFiles
     const selectedFileCount = Object.keys(selectedFiles).length
     const isSomethingSelected = selectedFileCount > 0
+    const autoProceed = this.core.opts.autoProceed
 
     const drawerItem = (file) => {
       const isUploaded = file.progress === 100
@@ -41,15 +42,17 @@ export default class ProgressDrawer extends Plugin {
           <polygon points="2.836,14.708 5.665,11.878 13.415,19.628 26.334,6.712 29.164,9.54 13.415,25.288 "></polygon>
         </svg>`
 
-      return yo`<li class="UppyProgressDrawer-item ${isUploaded ? 'is-uploaded' : ''}"
+      return yo`<li class="UppyProgressDrawer-item"
                     title="${file.name}">
-        <img class="UppyProgressDrawer-itemIcon" alt="${file.name}" src="${file.preview}">
+        <div class="UppyProgressDrawer-itemInfo">
+          <img class="UppyProgressDrawer-itemIcon" alt="${file.name}" src="${file.preview}">
+        </div>
         <div class="UppyProgressDrawer-itemInner">
           <span class="UppyProgressDrawer-itemProgress"
                 style="width: ${file.progress}%"></span>
           <h4 class="UppyProgressDrawer-itemName">
             ${file.name} (${file.progress})</h4>
-          ${checkIcon}
+          ${isUploaded ? checkIcon : ''}
           <button class="UppyProgressDrawer-itemRemove" onclick=${remove}>×</button>
         </div>
       </li>`
@@ -68,9 +71,12 @@ export default class ProgressDrawer extends Plugin {
           return drawerItem(selectedFiles[fileID])
         })}
       </ul>
-      <button class="UppyProgressDrawer-upload" type="button" onclick=${next}>
-        ${isSomethingSelected ? this.core.i18n('uploadFiles', {'smart_count': selectedFileCount}) : ''}
-      </button>
+      ${autoProceed
+        ? ''
+        : yo`<button class="UppyProgressDrawer-upload" type="button" onclick=${next}>
+          ${isSomethingSelected ? this.core.i18n('uploadFiles', {'smart_count': selectedFileCount}) : ''}
+        </button>`
+      }
     </div>`
   }
 

src/scss/_progressdrawer.scss

@@ -59,10 +59,16 @@
   }
 }
 
-.UppyProgressDrawer-itemIcon {
+.UppyProgressDrawer-itemInfo {
   float: left;
   width: 12%;
   height: 40px;
+  border-right: 1px solid white;
+}
+
+.UppyProgressDrawer-itemIcon {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 

website/src/examples/modal/app.es6

@@ -2,7 +2,7 @@ import Uppy from 'uppy/core'
 import { Dummy, DragDrop, GoogleDrive, Modal, ProgressBar, Present, Tus10 } from 'uppy/plugins'
 import ProgressDrawer from '../../../../src/plugins/ProgressDrawer.js'
 
-const uppy = new Uppy({debug: true})
+const uppy = new Uppy({debug: true, autoProceed: false})
 uppy
   .use(Modal, {trigger: '#uppyModalOpener'})
   // .use(ProgressBar, {target: Modal})