Progress plugin, refactoring

src/core/Core.js

@@ -21,7 +21,7 @@ export default class Core {
     this.opts = Object.assign({}, defaultOptions, opts)
 
     // Dictates in what order different plugin types are ran:
-    this.types = [ 'presetter', 'selecter', 'uploader' ]
+    this.types = [ 'presetter', 'visualizer', 'selecter', 'uploader' ]
 
     this.type = 'core'
 
@@ -35,9 +35,11 @@ export default class Core {
     // Set up an event EventEmitter
     this.emitter = ee()
 
-    this.emitter.on('progress', data => {
-      console.log('до чего дошел прогресс: ' + data.percentage)
-    })
+    // this.emitter.on('progress', data => {
+    //   console.log('wow, progress: ' + data.percentage)
+    //   const progress = document.querySelector('.UppyDragDrop-progressInner')
+    //   progress.setAttribute('style', `width: ${data.percentage}%`)
+    // })
   }
 
 /**
@@ -93,7 +95,7 @@ export default class Core {
     )
 
     return Promise.all(methods)
-      .catch((error) => console.error(error))
+      .catch(error => console.error(error))
   }
 
 /**
@@ -118,7 +120,7 @@ export default class Core {
     }).map(type => this.runType.bind(this, type))
 
     Utils.promiseWaterfall(typeMethods)
-      .then((result) => console.log(result))
-      .catch((error) => console.error(error))
+      .then(result => console.log(result))
+      .catch(error => console.error(error))
   }
 }

src/core/Utils.js

@@ -15,9 +15,9 @@
  */
 function promiseWaterfall (methods) {
   const [resolvedPromise, ...tasks] = methods
-  const finalTaskPromise = tasks.reduce(function (prevTaskPromise, task) {
+  const finalTaskPromise = tasks.reduce((prevTaskPromise, task) => {
     return prevTaskPromise.then(task)
-  }, resolvedPromise([]))  // initial value
+  }, resolvedPromise([])) // initial value
 
   return finalTaskPromise
 }

src/plugins/DragDrop.js

@@ -51,9 +51,6 @@ export default class DragDrop extends Plugin {
     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%')
   }
 
 /**
@@ -142,6 +139,7 @@ export default class DragDrop extends Plugin {
   result (files) {
     return new Promise((resolve, reject) => {
       const result = {from: 'DragDrop', files}
+      // const result = files
       // if autoProceed is false, wait for upload button to be pushed,
       // otherwise just pass files to uploaders right away
       if (this.core.opts.autoProceed) {

src/plugins/Plugin.js

@@ -44,6 +44,9 @@ 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
@@ -51,7 +54,15 @@ export default class Plugin {
 
     const files = []
     results.forEach(result => {
-      Array.from(result.files).forEach(file => files.push(file))
+      try {
+        Array.from(result.files).forEach(file => files.push(file))
+      } catch (e) {
+        console.log(e)
+      }
+      // result.forEach(item => {
+      //   files.push(item)
+      //   console.log(item)
+      // })
     })
 
     // const files = [];
@@ -60,7 +71,7 @@ export default class Plugin {
     //   // 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));
+    //     files.push(results[i].files.item(j));
     //   }
     // }
 

src/plugins/Progress.js

@@ -0,0 +1,50 @@
+import Utils from '../core/Utils'
+import Plugin from './Plugin'
+
+/**
+ * Progress bar
+ *
+ */
+export default class Progress extends Plugin {
+  constructor (core, opts) {
+    super(core, opts)
+    this.type = 'visualizer'
+
+    // set default options
+    const defaultOptions = {}
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+
+    this.progressBarElement = document.querySelector('.UppyDragDrop-progressInner')
+  }
+
+  progressBar (percentage) {
+    const progressBarElement = document.querySelector('.UppyDragDrop-progressInner')
+    progressBarElement.setAttribute('style', `width: ${percentage}%`)
+  }
+
+  spinner () {
+    Utils.addClass(this.spinnerElement, 'is-spinning')
+  }
+
+  initEvents () {
+    this.core.emitter.on('progress', data => {
+      const percentage = data.percentage
+      console.log('this is what the progress is: ' + percentage)
+      this.progressBar(percentage)
+    })
+  }
+
+  run (results) {
+    console.log({
+      class: 'Progress',
+      method: 'run',
+      results: results
+    })
+
+    this.initEvents()
+
+    return Promise.resolve(results)
+  }
+}

src/plugins/Tus10.js

@@ -31,10 +31,11 @@ export default class Tus10 extends Plugin {
     })
 
     const files = this.extractFiles(results)
+    // const files = results
 
-    // console.log(files);
+    console.log('tus got this: ')
+    console.log(results)
 
-    this.setProgress(0)
     // var uploaded  = [];
     const uploaders = []
     for (let i in files) {
@@ -57,25 +58,24 @@ export default class Tus10 extends Plugin {
  */
   upload (file, current, total) {
     console.log(`uploading ${current} of ${total}`)
+
     // Create a new tus upload
-    const self = this
     const upload = new tus.Upload(file, {
       endpoint: this.opts.endpoint,
-      onError: function (error) {
+      onError: error => {
         return Promise.reject('Failed because: ' + error)
       },
-      onProgress: function (bytesUploaded, bytesTotal) {
+      onProgress: (bytesUploaded, bytesTotal) => {
         let percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
         percentage = Math.round(percentage)
         // self.setProgress(percentage, current, total)
 
         // Dispatch progress event
-        self.core.emitter.emit('progress', {
+        this.core.emitter.emit('progress', {
           percentage
         })
-        // self.setProgress(percentage)
       },
-      onSuccess: function () {
+      onSuccess: () => {
         console.log(`Download ${upload.file.name} from ${upload.url}`)
         return Promise.resolve(upload)
       }

src/plugins/index.js

@@ -6,6 +6,9 @@ import DragDrop from './DragDrop'
 import Dropbox from './Dropbox'
 import Formtag from './Formtag'
 
+// Visualizers
+import Progress from './Progress'
+
 // Uploaders
 import Tus10 from './Tus10'
 import Multipart from './Multipart'
@@ -15,6 +18,7 @@ import TransloaditBasic from './TransloaditBasic'
 
 export default {
   Plugin,
+  Progress,
   DragDrop,
   Dropbox,
   Formtag,

website/src/examples/dragdrop/app.es6

@@ -1,16 +1,17 @@
 import Uppy from 'uppy/core'
-import { DragDrop, Tus10 } from 'uppy/plugins'
+import { DragDrop, Progress, Tus10 } from 'uppy/plugins'
 
 const uppyOne = new Uppy({autoProceed: true, debug: true})
 uppyOne
+  .use(Progress)
   .use(DragDrop, {target: '.UppyDragDrop-One'})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/', progress: '#UppyDragDrop-Two'})
   .run()
 
-const uppyTwo = new Uppy({debug: true})
-uppyTwo
-  .use(DragDrop, {target: '#UppyDragDrop-Two'})
-  .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/', progress: '#UppyDragDrop-Two'})
-  .run()
+// const uppyTwo = new Uppy({debug: true})
+// uppyTwo
+//   .use(DragDrop, {target: '#UppyDragDrop-Two'})
+//   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/', progress: '#UppyDragDrop-Two'})
+//   .run()
 
-console.log(`Uppy ${uppyOne.type} loaded`)
+// console.log(`Uppy ${uppyOne.type} loaded`)