Fixing Promise waterfall in Core and DragDrop plugin

src/core/Core.js

@@ -41,16 +41,20 @@ export default class {
       // cb    : cb
     });
 
-    const methods = [];
-    for (let p in this.plugins[type]) {
-      const plugin = this.plugins[type][p];
-      methods.push(plugin.run.call(plugin, files));
-    }
+    // const methods = this.plugins[type].map(
+    //   plugin => {
+    //     return new Promise(function (resolve, reject) {
+    //       plugin.run.call(plugin, files).then(files => resolve(files));
+    //     });
+    //   }
+    // );
+
+    const methods = this.plugins[type].map(
+      plugin => plugin.run.call(plugin, files)
+    );
 
     return Promise.all(methods);
 
-    // const methods = this.plugins[type].map(plugin => plugin.run.bind(plugin, files));
-
     // async.parallel(methods, cb);
   }
 
@@ -61,7 +65,7 @@ export default class {
       method: 'Core.run'
     });
 
-    var typeMethods = [];
+    // let typeMethods = [];
     // typeMethods.push(async.constant([]));
 
     // for (let t in this.types) {
@@ -69,11 +73,17 @@ export default class {
     //   typeMethods.push(this.runType.bind(this, type));
     // }
 
-    this.types.forEach(type => {
-      if (this.plugins[type]) {
-        typeMethods.push(this.runType.bind(this, type));
-      }
-    });
+    // this.types.forEach(type => {
+    //   if (this.plugins[type]) {
+    //     typeMethods.push(this.runType.bind(this, type));
+    //   }
+    // });
+
+    // First we select only plugins of current type,
+    // then create an array of runType methods of this plugins
+    let typeMethods = this.types.filter(type => {
+      return this.plugins[type];
+    }).map(type => this.runType.bind(this, type));
 
     promiseWaterfall(typeMethods)
       .then((result) => console.log(result))

src/plugins/DragDrop.js

@@ -45,6 +45,8 @@ export default class DragDrop extends Plugin {
   }
 
   listenForEvents() {
+    console.log(`waiting for some files to be dropped on ${this.opts.selector}`);
+
     if (this.isDragDropSupported) {
       Utils.addClass(this.dropzone, 'is-dragdrop-supported');
     }
@@ -64,18 +66,23 @@ export default class DragDrop extends Plugin {
       Utils.removeClass(this.dropzone, 'is-dragover');
     });
 
-    this.dropzone.addEventListener('drop', this.handleDrop);
+    let onDrop = new Promise((resolve, reject) => {
+      this.dropzone.addEventListener('drop', (e) => {
+        resolve(this.handleDrop.bind(null, e));
+      });
+    });
 
-    this.dropzoneInput.addEventListener('change', this.handleInputChange);
+    let onInput = new Promise((resolve, reject) => {
+      this.dropzoneInput.addEventListener('change', (e) => {
+        resolve(this.handleInputChange.bind(null, e));
+      });
+    });
 
-    console.log(`waiting for some files to be dropped on ${this.opts.selector}`);
-  }
+    return Promise.race([onDrop, onInput]).then(handler => handler());
 
-  // Toggle is-dragover state when files are dragged over or dropped
-  // in this case — add/remove 'is-dragover' class
-  // toggleDragoverState(e) {
-  //   toggleClass(this.dropzone, 'is-dragover');
-  // }
+    // this.dropzone.addEventListener('drop', this.handleDrop);
+    // this.dropzoneInput.addEventListener('change', this.handleInputChange);
+  }
 
   displayStatus(status) {
     this.status.innerHTML = status;
@@ -114,10 +121,10 @@ export default class DragDrop extends Plugin {
 
     console.log('DragDrop running!');
     // console.log(files);
-    this.listenForEvents();
-    this.core.setProgress(this, 0);
-    var selected = [ {name: 'lolcat.jpeg'} ];
-    this.core.setProgress(this, 100);
+    return this.listenForEvents();
+    // this.core.setProgress(this, 0);
+    // var selected = [ {name: 'lolcat.jpeg'} ];
+    // this.core.setProgress(this, 100);
     // return selected;
     // done(null, 'done with DragDrop');
     // return Promise.resolve(files);