Added File upload support to textarea

gchq · Jan 15, 2019 · fcc39a0 · fcc39a0
1 parent 0602f45
commit fcc39a0
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
@@ -137,6 +137,9 @@ class Manager {
         this.addDynamicListener("#rec-list li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe);
         this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe);
         this.addDynamicListener("#rec-list", "operationremove", this.recipe.opRemove.bind(this.recipe));
+        this.addDynamicListener("textarea.arg", "dragover", this.recipe.textArgDragover, this.recipe);
+        this.addDynamicListener("textarea.arg", "dragleave", this.recipe.textArgDragLeave, this.recipe);
+        this.addDynamicListener("textarea.arg", "drop", this.recipe.textArgDrop, this.recipe);
 
         // Input
         this.addMultiEventListener("#input-text", "keyup", this.input.inputChange, this.input);

diff --git a/src/web/RecipeWaiter.mjs b/src/web/RecipeWaiter.mjs
@@ -453,6 +453,69 @@ class RecipeWaiter {
         window.dispatchEvent(this.manager.statechange);
     }
 
+    /**
+     * Handler for text argument dragover events.
+     * Gives the user a visual cue to show that items can be dropped here.
+     *
+     * @param {event} e
+     */
+    textArgDragover (e) {
+        // This will be set if we're dragging an operation
+        if (e.dataTransfer.effectAllowed === "move")
+            return false;
+
+        e.stopPropagation();
+        e.preventDefault();
+        e.target.closest("textarea.arg").classList.add("dropping-file");
+    }
+
+    /**
+     * Handler for text argument dragleave events.
+     * Removes the visual cue.
+     *
+     * @param {event} e
+     */
+    textArgDragLeave (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        e.target.classList.remove("dropping-file");
+    }
+
+    /**
+     * Handler for text argument drop events.
+     * Loads the dragged data into the argument textarea.
+     *
+     * @param {event} e
+     */
+    textArgDrop(e) {
+        // This will be set if we're dragging an operation
+        if (e.dataTransfer.effectAllowed === "move")
+            return false;
+
+        e.stopPropagation();
+        e.preventDefault();
+        const targ = e.target;
+        const file = e.dataTransfer.files[0];
+        const text = e.dataTransfer.getData("Text");
+
+        targ.classList.remove("dropping-file");
+
+        if (text) {
+            targ.value = text;
+            return;
+        }
+
+        if (file) {
+            const reader = new FileReader();
+            const self = this;
+            reader.onload = function (e) {
+                targ.value = e.target.result;
+                self.ingChange();
+            };
+            reader.readAsText(file);
+        }
+    }
+
 
     /**
      * Sets register values.