Form with file select fallback in playground, comments, check support for drag & drop in the browser

examples/playground/index.html

@@ -46,9 +46,14 @@
           and online.
         </p>
 
-        <div id="upload-target">
-          Drag & Drop here
-        </div>
+        <form id="upload-target" class="uppyDragDrop" method="post" action="/" enctype="multipart/form-data">
+          <div>
+            <input class="UppyDragDrop-file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
+            <label class="UppyDragDrop-label" for="UppyDragDrop-file"><strong>Choose a file</strong><span class="UppyDragDrop-drag"> or drag it here</span>.</label>
+            <button class="UppyDragDrop-btn" type="submit">Upload</button>
+          </div>
+          <div class="UppyDragDrop-status">Uploading&hellip;</div>
+        </form>
 
       </div>
     </div>

src/core/Transloadit.js

@@ -21,10 +21,10 @@ export default class {
   setProgress(plugin, percentage) {
     // 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;
   }
 
+  // Runs all plugins of the same type in parallel
   runType(type, files, cb) {
     console.dir({
       method: 'Transloadit.runType',
@@ -44,6 +44,8 @@ export default class {
     async.parallel(methods, cb);
   }
 
+  // Runs a waterfall of runType plugin packs, like so:
+  // All preseters(data) --> All selecters(data) --> All uploaders(data) --> done
   run() {
     console.dir({
       method: 'Transloadit.run'
@@ -52,10 +54,16 @@ export default class {
     var typeMethods = [];
     typeMethods.push(async.constant([]));
 
-    for (let t in this.types) {
-      const type = this.types[t];
-      typeMethods.push(this.runType.bind(this, type));
-    }
+    // for (let t in this.types) {
+    //   const type = this.types[t];
+    //   typeMethods.push(this.runType.bind(this, type));
+    // }
+
+    this.types.forEach(type => {
+      if (this.plugins[type]) {
+        typeMethods.push(this.runType.bind(this, type));
+      }
+    });
 
     async.waterfall(typeMethods, function (err, finalFiles) {
       console.dir({

src/plugins/DragDrop.js

@@ -16,6 +16,16 @@ export default class DragDrop extends TransloaditPlugin {
     this.handleDragEnter = this.handleDragEnter.bind(this);
     this.handleDragOver = this.handleDragOver.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
+    this.checkDragDropSupport = this.checkDragDropSupport(this);
+  }
+
+  checkDragDropSupport() {
+    this.isDragDropSupported = function () {
+      const div = document.createElement('div');
+      return (('draggable' in div) ||
+             ('ondragstart' in div && 'ondrop' in div))
+             && 'FormData' in window && 'FileReader' in window;
+    }();
   }
 
   listenForEvents() {