I have some binary files I'd like to be able to parse within the browser. I have found some python code that (I think) does exactly what I need but I don't understand python enough to interpret what I'm seeing.
I have some sample files on my own code repository, and below is my attempt at parsing these files. You can drag files into the snippet window to parse that file
const elBody = document.body;
const dragClass = "drag-over";
const fReader = new FileReader();
fReader.onload = function (e) {
const data = e.target.result;
processFile(data);
};
elBody.addEventListener("dragover", (dragEvent) => {
dragEvent.preventDefault();
if (!elBody.classList.contains(dragClass)) {
elBody.classList.add(dragClass);
}
});
elBody.addEventListener("dragleave", () => {
elBody.classList.remove(dragClass);
});
elBody.addEventListener("drop", (dropEvent) => {
dropEvent.preventDefault();
elBody.classList.remove(dragClass);
[...dropEvent.dataTransfer.items].forEach((item, i) => {
if (item.kind === "file") {
const file = item.getAsFile();
fReader.readAsArrayBuffer(file, 'utf-8');
}
});
});
function processFile(arrayBuffer){
const byteLength = 4;
const b1 = new Int32Array(arrayBuffer.slice(0, byteLength))[0]
console.log(b1)
// for (let startIdx = 0; startIdx < arrayBuffer.byteLength; startIdx += byteLength) {
// const byte = new Int32Array(arrayBuffer.slice(startIdx, startIdx + byteLength))[0]
// console.log(byte)
// }
}
html,body {height: 100vh;margin: 0;}
.drag-over {background-color: #ccc;}
<h1>Drop a file here</h1>
I am just not sure if I am on the correct track or not. My only source for information about how these type of files are structured come from these comments in the python file
How do I take that information about the file format and convert that into a way to perform the same actions in JavaScript?
Via Active questions tagged javascript - Stack Overflow https://ift.tt/GMLdkKE
Comments
Post a Comment