Output files can now be downloaded using FileSaver (supports large files ~500MB)

src/web/InputWaiter.js

@@ -239,6 +239,7 @@ InputWaiter.prototype.closeFile = function() {
  */
 InputWaiter.prototype.clearIoClick = function() {
     this.closeFile();
+    this.manager.output.closeFile();
     this.manager.highlighter.removeHighlights();
     document.getElementById("input-text").value = "";
     document.getElementById("output-text").value = "";
@@ -246,7 +247,6 @@ InputWaiter.prototype.clearIoClick = function() {
     document.getElementById("output-info").innerHTML = "";
     document.getElementById("input-selection-info").innerHTML = "";
     document.getElementById("output-selection-info").innerHTML = "";
-    document.getElementById("output-file").style.display = "none";
     window.dispatchEvent(this.manager.statechange);
 };
 

src/web/Manager.js

@@ -158,6 +158,7 @@ Manager.prototype.initialiseEventListeners = function() {
     this.addMultiEventListener("#output-text", "mousedown dblclick select",  this.highlighter.outputMousedown, this.highlighter);
     this.addMultiEventListener("#output-html", "mousedown dblclick select",  this.highlighter.outputHtmlMousedown, this.highlighter);
     this.addDynamicListener(".file-switch", "click", this.output.fileSwitch, this.output);
+    this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
 
     // Options
     document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options));

src/web/OutputWaiter.js

@@ -1,4 +1,5 @@
 import Utils from "../core/Utils.js";
+import FileSaver from "file-saver";
 
 
 /**
@@ -15,6 +16,8 @@ import Utils from "../core/Utils.js";
 const OutputWaiter = function(app, manager) {
     this.app = app;
     this.manager = manager;
+
+    this.file = null;
 };
 
 
@@ -43,6 +46,8 @@ OutputWaiter.prototype.set = function(data, type, duration) {
     const inputHighlighter = document.getElementById("input-highlighter");
     let scriptElements, lines, length;
 
+    this.closeFile();
+
     switch (type) {
         case "html":
             outputText.style.display = "none";
@@ -104,6 +109,8 @@ OutputWaiter.prototype.set = function(data, type, duration) {
  * @param {File} file
  */
 OutputWaiter.prototype.setFile = function(file) {
+    this.file = file;
+
     // Display file overlay in output area with details
     const fileOverlay = document.getElementById("output-file"),
         fileSize = document.getElementById("output-file-size");
@@ -113,6 +120,25 @@ OutputWaiter.prototype.setFile = function(file) {
 };
 
 
+/**
+ * Removes the output file and nulls its memory.
+ */
+OutputWaiter.prototype.closeFile = function() {
+    this.file = null;
+    document.getElementById("output-file").style.display = "none";
+};
+
+
+/**
+ * Handler for file download events.
+ */
+OutputWaiter.prototype.downloadFile = function() {
+    const filename = window.prompt("Please enter a filename:", "download.dat");
+
+    if (filename) FileSaver.saveAs(this.file, filename, false);
+};
+
+
 /**
  * Displays information about the output.
  *
@@ -169,24 +195,13 @@ OutputWaiter.prototype.adjustWidth = function() {
 
 /**
  * Handler for save click events.
- * Saves the current output to a file, downloaded as a URL octet stream.
+ * Saves the current output to a file.
  */
 OutputWaiter.prototype.saveClick = function() {
-    const data = Utils.toBase64(this.app.dishStr);
-    const filename = window.prompt("Please enter a filename:", "download.dat");
-
-    if (filename) {
-        const el = document.createElement("a");
-        el.setAttribute("href", "data:application/octet-stream;base64;charset=utf-8," + data);
-        el.setAttribute("download", filename);
-
-        // Firefox requires that the element be added to the DOM before it can be clicked
-        el.style.display = "none";
-        document.body.appendChild(el);
-
-        el.click();
-        el.remove();
+    if (!this.file) {
+        this.file = new File([new Uint8Array(Utils.strToCharcode(this.app.dishStr))], "");
     }
+    this.downloadFile();
 };
 
 
@@ -250,7 +265,7 @@ OutputWaiter.prototype.undoSwitchClick = function() {
 
 /**
  * Handler for file switch click events.
- * Moves a files data for items created via Utils.displayFilesAsHTML to the input.
+ * Moves a file's data for items created via Utils.displayFilesAsHTML to the input.
  */
 OutputWaiter.prototype.fileSwitch = function(e) {
     e.preventDefault();

src/web/html/index.html

@@ -222,7 +222,7 @@
                                         <img aria-hidden="true" src="<%- require('../static/images/cyberchef-256x256.png') %>" alt="File icon"/>
                                         <div class="card-body">
                                             Size: <span id="output-file-size"></span><br>
-                                            Download<br>
+                                            <button id="output-file-download" type="button" class="btn btn-primary btn-sm">Download</button><br>
                                             Display in output<br>
                                             Options for how much to display
                                         </div>