Merge branch 'j433866-open-file-button'

src/web/InputWaiter.mjs

@@ -243,14 +243,22 @@ class InputWaiter {
         }
 
         if (file) {
-            this.closeFile();
+            this.loadFile(file);
-            this.loaderWorker = new LoaderWorker();
-            this.loaderWorker.addEventListener("message", this.handleLoaderMessage.bind(this));
-            this.loaderWorker.postMessage({"file": file});
-            this.set(file);
         }
     }
 
+    /**
+     * Handler for open input button events
+     * Loads the opened data into the input textarea
+     *
+     * @param {event} e
+     */
+    inputOpen(e) {
+        e.preventDefault();
+        const file = e.srcElement.files[0];
+        this.loadFile(file);
+    }
+
 
     /**
      * Handler for messages sent back by the LoaderWorker.
@@ -306,6 +314,22 @@ class InputWaiter {
     }
 
 
+    /**
+     * Loads a file into the input.
+     *
+     * @param {File} file
+     */
+    loadFile(file) {
+        if (file) {
+            this.closeFile();
+            this.loaderWorker = new LoaderWorker();
+            this.loaderWorker.addEventListener("message", this.handleLoaderMessage.bind(this));
+            this.loaderWorker.postMessage({"file": file});
+            this.set(file);
+        }
+    }
+
+
     /**
      * Handler for clear IO events.
      * Resets the input, output and info areas.

src/web/Manager.mjs

@@ -146,6 +146,7 @@ class Manager {
         this.addMultiEventListener("#input-text", "paste", this.input.inputPaste, this.input);
         document.getElementById("reset-layout").addEventListener("click", this.app.resetLayout.bind(this.app));
         document.getElementById("clr-io").addEventListener("click", this.input.clearIoClick.bind(this.input));
+        this.addListeners("#open-file", "change", this.input.inputOpen, this.input);
         this.addListeners("#input-text,#input-file", "dragover", this.input.inputDragover, this.input);
         this.addListeners("#input-text,#input-file", "dragleave", this.input.inputDragleave, this.input);
         this.addListeners("#input-text,#input-file", "drop", this.input.inputDrop, this.input);

src/web/html/index.html

@@ -225,6 +225,10 @@
                         <div class="title no-select">
                             <label for="input-text">Input</label>
                             <span class="float-right">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-file" data-toggle="tooltip" title="Open file as input" onclick="document.getElementById('open-file').click();">
+                                    <i class="material-icons">input</i>
+                                    <input type="file" id="open-file" style="display: none">
+                                </button>
                                 <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output">
                                     <i class="material-icons">delete</i>
                                 </button>