mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-20 23:06:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Files are now uploaded in a worker and not displayed in the input by default. Added ArrayBuffer Dish type.

Browse source
This commit is contained in:
n1474335 2017-12-18 20:39:55 +00:00
parent 021cae1a95
commit 4e00ac9300
8 changed files with 232 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/web/InputWaiter.js
View file

@ -1,4 +1,5 @@
import Utils from "../core/Utils.js";
import LoaderWorker from "worker-loader?inline&fallback=false!./LoaderWorker.js";
/**
@ -33,6 +34,9 @@ const InputWaiter = function(app, manager) {
144, //Num
145, //Scroll
];
this.loaderWorker = null;
this.fileBuffer = null;
};
@ -42,23 +46,49 @@ const InputWaiter = function(app, manager) {
* @returns {string}
*/
InputWaiter.prototype.get = function() {
return document.getElementById("input-text").value;
return this.fileBuffer || document.getElementById("input-text").value;
};
/**
* Sets the input in the input textarea.
* Sets the input in the input area.
*
* @param {string} input
* @param {string|File} input
*
* @fires Manager#statechange
*/
InputWaiter.prototype.set = function(input) {
if (input instanceof File) {
this.setFile(input);
input = "";
}
document.getElementById("input-text").value = input;
window.dispatchEvent(this.manager.statechange);
};
/**
* Shows file details.
*
* @param {File} file
*/
InputWaiter.prototype.setFile = function(file) {
// Display file overlay in input area with details
const fileOverlay = document.getElementById("input-file"),
fileName = document.getElementById("input-file-name"),
fileSize = document.getElementById("input-file-size"),
fileType = document.getElementById("input-file-type"),
fileUploaded = document.getElementById("input-file-uploaded");
fileOverlay.style.display = "block";
fileName.textContent = file.name;
fileSize.textContent = file.size.toLocaleString() + " bytes";
fileType.textContent = file.type;
fileUploaded.textContent = "0%";
};
/**
* Displays information about the input.
*
@ -118,7 +148,7 @@ InputWaiter.prototype.inputDragover = function(e) {
e.stopPropagation();
e.preventDefault();
e.target.classList.add("dropping-file");
e.target.closest("#input-text,#input-file").classList.add("dropping-file");
};
@ -131,7 +161,8 @@ InputWaiter.prototype.inputDragover = function(e) {
InputWaiter.prototype.inputDragleave = function(e) {
e.stopPropagation();
e.preventDefault();
e.target.classList.remove("dropping-file");
document.getElementById("input-text").classList.remove("dropping-file");
document.getElementById("input-file").classList.remove("dropping-file");
};
@ -149,55 +180,57 @@ InputWaiter.prototype.inputDrop = function(e) {
e.stopPropagation();
e.preventDefault();
const el = e.target;
const file = e.dataTransfer.files[0];
const text = e.dataTransfer.getData("Text");
const reader = new FileReader();
let inputCharcode = "";
let offset = 0;
const CHUNK_SIZE = 20480; // 20KB
const setInput = function() {
const recipeConfig = this.app.getRecipeConfig();
if (!recipeConfig[0] || recipeConfig[0].op !== "From Hex") {
recipeConfig.unshift({op: "From Hex", args: ["Space"]});
this.app.setRecipeConfig(recipeConfig);
}
document.getElementById("input-text").classList.remove("dropping-file");
document.getElementById("input-file").classList.remove("dropping-file");
this.set(inputCharcode);
el.classList.remove("loadingFile");
}.bind(this);
const seek = function() {
if (offset >= file.size) {
setInput();
return;
}
el.value = "Processing... " + Math.round(offset / file.size * 100) + "%";
const slice = file.slice(offset, offset + CHUNK_SIZE);
reader.readAsArrayBuffer(slice);
};
reader.onload = function(e) {
const data = new Uint8Array(reader.result);
inputCharcode += Utils.toHexFast(data);
offset += CHUNK_SIZE;
seek();
};
el.classList.remove("dropping-file");
if (text) {
this.closeFile();
this.set(text);
return;
}
if (file) {
el.classList.add("loadingFile");
seek();
} else if (text) {
this.set(text);
this.closeFile();
this.loaderWorker = new LoaderWorker();
this.loaderWorker.addEventListener("message", this.handleLoaderMessage.bind(this));
this.loaderWorker.postMessage({"file": file});
this.set(file);
}
};
/**
* Handler for messages sent back by the LoaderWorker.
*
* @param {MessageEvent} e
*/
InputWaiter.prototype.handleLoaderMessage = function(e) {
const r = e.data;
if (r.hasOwnProperty("progress")) {
const fileUploaded = document.getElementById("input-file-uploaded");
fileUploaded.textContent = r.progress + "%";
}
if (r.hasOwnProperty("fileBuffer")) {
this.fileBuffer = r.fileBuffer;
window.dispatchEvent(this.manager.statechange);
}
};
/**
* Handler for file close events.
*/
InputWaiter.prototype.closeFile = function() {
if (this.loaderWorker) this.loaderWorker.terminate();
this.fileBuffer = null;
document.getElementById("input-file").style.display = "none";
};
/**
* Handler for clear IO events.
* Resets the input, output and info areas.
@ -205,6 +238,7 @@ InputWaiter.prototype.inputDrop = function(e) {
* @fires Manager#statechange
*/
InputWaiter.prototype.clearIoClick = function() {
this.closeFile();
this.manager.highlighter.removeHighlights();
document.getElementById("input-text").value = "";
document.getElementById("output-text").value = "";