assignBrowse / onDrop: Consider the possibility of an async initFileFn (#350)

* assignBrowse/onDrop: Consider the possibility of an async initFileFn

When calling *addFile(), FlowChunk are created which, among other things look
 for the file size to compute the endByte (and the number of chunks)
If an "initFileFn" is declared *AND* this function is async' it's sane to assume
 we need to use `asyncAddFile()` which will bootstrap slightly differently.
By giving the time to run an async `initFileFn` it can, for example, allow the chunk
 size to be computed differently regarding the stream initialization.
An example is a stream-crypto later that could had an overhead affecting FlowFile.size

Note: In the case of assignBrowse, the input is set to readonly for the time (async) initFileFn() runs

Author: Raphaël Droz

src/Flow.js

@@ -142,6 +142,25 @@ export default class Flow extends Eventizer {
     }
   }
 
+  /**
+   * On drop event when file/stream initialization is asynchronous
+   * @function
+   * @param {MouseEvent} event
+   */
+  async asyncOnDrop(event) {
+    if (this.opts.onDropStopPropagation) {
+      event.stopPropagation();
+    }
+    event.preventDefault();
+    var dataTransfer = event.dataTransfer;
+    if (dataTransfer.items && dataTransfer.items[0] &&
+        dataTransfer.items[0].webkitGetAsEntry) {
+      this.webkitReadDataTransfer(event);
+    } else {
+      await this.asyncAddFiles(dataTransfer.files, event);
+    }
+  }
+
   /**
    * Prevent default
    * @function
@@ -341,12 +360,25 @@ export default class Flow extends Eventizer {
         input.setAttribute(key, value);
       });
       // When new files are added, simply append them to the overall list
-      input.addEventListener('change', (e) => {
-        if (e.target.value) {
-          this.addFiles(e.target.files, e);
-          e.target.value = '';
-        }
-      }, false);
+      // but adapt to the case where initFileFn is async.
+      var callback = this.opts.initFileFn
+          && typeof this.opts.initFileFn === 'function'
+          && this.opts.initFileFn.constructor.name  === 'AsyncFunction'
+          ? async e => {
+            if (e.target.value) {
+              input.setAttribute('readonly', 'readonly');
+              await this.asyncAddFiles(e.target.files, e);
+              e.target.value = '';
+              input.removeAttribute('readonly');
+            }
+          }
+          : e => {
+            if (e.target.value) {
+              this.addFiles(e.target.files, e);
+              e.target.value = '';
+            }
+          };
+      input.addEventListener('change', callback, false);
     }, this);
   }
 
@@ -360,7 +392,11 @@ export default class Flow extends Eventizer {
       domNodes = [domNodes];
     }
 
-    this._onDropBound = this.onDrop.bind(this);
+    this._onDropBound = this.opts.initFileFn
+          && typeof this.opts.initFileFn === 'function'
+          && this.opts.initFileFn.constructor.name  === 'AsyncFunction'
+          ? this.asyncOnDrop.bind(this)
+          : this.onDrop.bind(this);
     for (let domNode of domNodes) {
       domNode.addEventListener('dragover', this.preventEvent, false);
       domNode.addEventListener('dragenter', this.preventEvent, false);