Skip to main content

How can I get started parsing binary files in JavaScript?

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