Basic progress bar

src/components/dragdrop.js

@@ -18,5 +18,6 @@ export default (context) => {
     ? `<button class="UppyDragDrop-uploadBtn" type="submit">${context.upload}</button>`
     : ''}
   <div class="UppyDragDrop-status"></div>
+  <div class="UppyDragDrop-progress"><div class="UppyDragDrop-progressInner"></div></div>
 </form>`
 }

src/core/Core.js

@@ -54,7 +54,7 @@ export default class Core {
  * @param {integer} percentage
  * @return {object} self for chaining
  */
-  setProgress (plugin, percentage) {
+  setProgress (plugin, percentage, element) {
     // Any plugin can call this via `this.core.setProgress(this, precentage)`
     console.log(plugin.type + ' plugin ' + plugin.name + ' set the progress to ' + percentage)
     return this

src/plugins/DragDrop.js

@@ -45,11 +45,15 @@ export default class DragDrop extends Plugin {
     this.dropzone = document.querySelector(`${this.opts.target} .UppyDragDrop-inner`)
     this.input = document.querySelector(`${this.opts.target} .UppyDragDrop-input`)
     this.status = document.querySelector(`${this.opts.target} .UppyDragDrop-status`)
+    this.progress = document.querySelector(`${this.opts.target} .UppyDragDrop-progress`)
 
     Utils.addClass(this.container, 'UppyDragDrop')
     if (this.isDragDropSupported) {
       Utils.addClass(this.container, 'is-dragdrop-supported')
     }
+
+    // this.progress = document.querySelector(`${this.opts.target} .UppyDragDrop-progressInner`)
+    // this.progress.setAttribute('style', 'width: 60%')
   }
 
 /**

src/plugins/Plugin.js

@@ -16,20 +16,25 @@ export default class Plugin {
     this.name = this.constructor.name
   }
 
-  setProgress (percentage, current, total) {
-    var finalPercentage = percentage
+  // setProgress (percentage, current, total) {
+  //   var finalPercentage = percentage
+  //
+  //   // if (current !== undefined && total !== undefined) {
+  //   //   var percentageOfTotal = (percentage / total);
+  //   //   // finalPercentage = percentageOfTotal;
+  //   //   if (current > 1) {
+  //   //     finalPercentage = percentage + (100 / (total * current));
+  //   //   } else {
+  //   //     finalPercentage = percentage;
+  //   //   }
+  //   // }
+  //
+  //   this.core.setProgress(this, finalPercentage)
+  // }
 
-    // if (current !== undefined && total !== undefined) {
-    //   var percentageOfTotal = (percentage / total);
-    //   // finalPercentage = percentageOfTotal;
-    //   if (current > 1) {
-    //     finalPercentage = percentage + (100 / (total * current));
-    //   } else {
-    //     finalPercentage = percentage;
-    //   }
-    // }
-
-    this.core.setProgress(this, finalPercentage)
+  setProgress (percentage, el) {
+    const progress = document.querySelector('.UppyDragDrop-progressInner')
+    progress.setAttribute('style', `width: ${percentage}%`)
   }
 
   extractFiles (results) {

src/plugins/Tus10.js

@@ -61,7 +61,8 @@ export default class Tus10 extends Plugin {
       onProgress: function (bytesUploaded, bytesTotal) {
         let percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
         percentage = Math.round(percentage)
-        self.setProgress(percentage, current, total)
+        // self.setProgress(percentage, current, total)
+        self.setProgress(percentage)
       },
       onSuccess: function () {
         console.log(`Download ${upload.file.name} from ${upload.url}`)

src/scss/_dragdrop.scss

@@ -67,3 +67,15 @@
     background: #ccc;
   }
 }
+
+.UppyDragDrop-progress {
+  width: 100%;
+  height: 20px;
+  margin-top: 20px;
+}
+
+.UppyDragDrop-progressInner {
+  background-color: green;
+  height: 100%;
+  width: 0;
+}

website/src/examples/dragdrop/app.html

@@ -3,14 +3,14 @@
 
 <div class="grid">
   <div class="column-1-2">
-    <h5>autoProceed is off</h5>
+    <h5>autoProceed is on</h5>
 
     <!-- Target DOM node #1 -->
     <div class="UppyDragDrop-One"></div>
   </div>
 
   <div class="column-1-2">
-    <h5>autoProceed is on</h5>
+    <h5>autoProceed is off</h5>
 
     <!-- Target DOM node #2 -->
     <div id="UppyDragDrop-Two"></div>