Javascript Filereader Reads File Incorrectly

I have a short JavaScript function which will take an uploaded file and display the hex equivalent of it. Comparing the original file and the output in a hex-editor shows that they

Solution 1:

To generate an Hex dump in js, you won't want to use the readAsText method, which will convert your data in either UCS-2 or UTF-16, instead, read directly the binary data you'll get from the readAsArrayBuffer method, and work from there:

functionhexDump(file) {
  returnnewPromise((res, rej) => {
    if (!(file instanceofBlob)) rej('wrong input');
    const reader = newFileReader();
    reader.onload = e => {
      res(hex(reader.result));
    };
    reader.onerror = e =>rej('error while reading');
    reader.readAsArrayBuffer(file);
  });
  // gotten from https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#Examplefunctionhex(buffer) {
    const hexCodes = [];
    const view = newDataView(buffer);
    for (let i = 0; i < view.byteLength; i += 4) {
      // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)let value = view.getUint32(i)
      // toString(16) will give the hex representation of the number without paddinglet stringValue = value.toString(16)
      // We use concatenation and slice for paddinglet padding = '00000000'let paddedValue = (padding + stringValue).slice(-padding.length).toUpperCase();
      hexCodes.push( // simple prettyfying
        paddedValue.slice(0,2),
        paddedValue.slice(2,4),
        paddedValue.slice(4,6),
        paddedValue.slice(6,8)
        );
    }
    return hexCodes.join(' ');
  }
}

// How to use it
inp.onchange = e =>hexDump(inp.files[0].slice(0, 100)) // for demo I slice the file
    .then(hex =>console.log(hex))
    .catch(e =>console.error(e));

<inputtype="file"id="inp">