Tweaks

src/components/dragdrop.js

@@ -3,12 +3,11 @@ export default (context) => {
       method="post"
       action="${context.endpoint}"
       enctype="multipart/form-data">
-    <img class="UppyDragDrop-puppy" src="/images/uppy.svg" />
+    <img class="UppyDragDrop-puppy" src="/images/uppy.svg">
     <input class="UppyDragDrop-input"
            id="UppyDragDrop-input"
            type="file"
            name="files[]"
-           data-multiple-caption="{count} files selected"
            multiple />
     <label class="UppyDragDrop-label" for="UppyDragDrop-input">
       <strong>${context.chooseFile}</strong>
@@ -17,7 +16,8 @@ export default (context) => {
   ${!context.showUploadBtn
     ? `<button class="UppyDragDrop-uploadBtn" type="submit">${context.upload}</button>`
     : ''}
+  <div class="UppyProgress"></div>
   <div class="UppyDragDrop-status"></div>
-  <div class="UppyDragDrop-progress"><div class="UppyDragDrop-progressInner"></div></div>
+  <div class="UppyDragDrop-progress"></div>
 </form>`
 }

src/plugins/Plugin.js

@@ -44,9 +44,6 @@ export default class Plugin {
       results: results
     })
 
-    // console.log(results)
-    // window.results = results
-
     // check if the results array is empty
     // if (!results || !results.count) {
     //   return results
@@ -67,10 +64,7 @@ export default class Plugin {
 
     // const files = [];
     // for (let i in results) {
-    //   // console.log('yo12131');
-    //   // console.log(results[i].files);
     //   for (let j in results[i].files) {
-    //     console.log(results[i].files.item(j));
     //     files.push(results[i].files.item(j));
     //   }
     // }

src/plugins/Progressbar.js

@@ -1,4 +1,3 @@
-import Utils from '../core/Utils'
 import Plugin from './Plugin'
 
 /**
@@ -20,36 +19,24 @@ export default class Progress extends Plugin {
   }
 
   progressBar (percentage) {
-    const progressBarElement = document.querySelector('.UppyDragDrop-progressInner')
+    const progressContainer = document.querySelector(this.opts.target)
+    progressContainer.innerHTML = '<div class="UppyProgressBar"></div>'
+    const progressBarElement = document.querySelector(`${this.opts.target} .UppyProgressBar`)
     progressBarElement.setAttribute('style', `width: ${percentage}%`)
   }
 
-  spinner () {
-    Utils.addClass(this.spinnerElement, 'is-spinning')
-  }
-
   initEvents () {
     this.core.emitter.on('progress', data => {
       const percentage = data.percentage
       const plugin = data.plugin
-      console.log(`this is what the progress is: ${percentage}, and its set by ${plugin}`)
+      this.core.log(
+        `this is what the progress is: ${percentage}, and its set by ${plugin.constructor.name}`
+      )
       this.progressBar(percentage)
     })
   }
 
-  // run (results) {
-  //   console.log({
-  //     class: 'Progress',
-  //     method: 'run',
-  //     results: results
-  //   })
-  //
-  //   this.initEvents()
-  //
-  //   return Promise.resolve(results)
-  // }
-
-  install() {
+  install () {
     return this.initEvents()
   }
 }

src/plugins/Tus10.js

@@ -17,37 +17,6 @@ export default class Tus10 extends Plugin {
     this.opts = Object.assign({}, defaultOptions, opts)
   }
 
-/**
- * Add files to an array of `upload()` calles, passing the current and total file count numbers
- *
- * @param {array | object} results
- * @returns {Promise} of parallel uploads `Promise.all(uploaders)`
- */
-  run (results) {
-    console.log({
-      class: 'Tus10',
-      method: 'run',
-      results: results
-    })
-
-    const files = this.extractFiles(results)
-    // const files = results
-
-    console.log('tus got this: ')
-    console.log(results)
-
-    // var uploaded  = [];
-    const uploaders = []
-    for (let i in files) {
-      const file = files[i]
-      const current = parseInt(i, 10) + 1
-      const total = files.length
-      uploaders.push(this.upload(file, current, total))
-    }
-
-    return Promise.all(uploaders)
-  }
-
 /**
  * Create a new Tus upload
  *
@@ -84,4 +53,34 @@ export default class Tus10 extends Plugin {
     // Start the upload
     upload.start()
   }
+
+/**
+ * Add files to an array of `upload()` calles, passing the current and total file count numbers
+ *
+ * @param {Array | Object} results
+ * @returns {Promise} of parallel uploads `Promise.all(uploaders)`
+ */
+  run (results) {
+    console.log({
+      class: this.constructor.name,
+      method: 'run',
+      results: results
+    })
+
+    const files = this.extractFiles(results)
+
+    this.core.log('tus got this: ')
+    this.core.log(results)
+
+    // var uploaded  = [];
+    const uploaders = []
+    for (let i in files) {
+      const file = files[i]
+      const current = parseInt(i, 10) + 1
+      const total = files.length
+      uploaders.push(this.upload(file, current, total))
+    }
+
+    return Promise.all(uploaders)
+  }
 }

src/scss/_dragdrop.scss

@@ -74,7 +74,7 @@
   margin: 15px auto;
 }
 
-.UppyDragDrop-progressInner {
+.UppyProgressBar {
   background-color: $color-pink;
   height: 100%;
   width: 0;