1

I am trying to get the checksum/hash from a file upload on my webpage.

I am currently able to upload the file via my browser then calculate the hash using the node.js crypto library. I first convert the blob to a data Url.

export function calculateHash(dataUrl, type){

  const sha1sum = crypto.createHash('sha1').update(dataUrl).digest("hex");
  console.log('Hash sum is ' + sha1sum);

}

Result: 66b8bdd2d1d49f708722c15b26409bc072096697

When i calculate the hash manually from the windows command prompt using the following command..

fciv.exe 1_1.wav -sha1

Result: b06071b13a1b50cd2976ed7bb4180f6963e8db8e

I would like to get the same checksum result from the data url in my browser as doing the manual check from the command prompt.

Is this possible?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
user1526912
  • 15,818
  • 14
  • 57
  • 92
  • The code you've presented here is from node.js' crypto module. This has nothing to do with a browser or [cryptojs]! Since this seems to be server code, how do you call your `calculateHash` function? What are the inputs to that function? Can you give some examples? This is basically the same comment as a [comment](http://stackoverflow.com/questions/37849779/how-to-calculate-the-sha1-hash-of-a-blob-using-node-js-crypto#comment63194752_37849779) to your earlier question. – Artjom B. Jun 20 '16 at 09:53
  • Node.js code runs on the server and only communicates with the browser through requests. What kind of requests do you use? Have you read [What is the difference between client-side and server-side programming?](http://stackoverflow.com/q/13840429/1816580) – Artjom B. Jun 20 '16 at 09:57

1 Answers1

4

A data url looks like data:image/png;base64,<BASE-64 DATA>. You would need to extract the BASE-64 DATA part, decode base64 and then run your hashing algorithm. Or - if you want to perform the hashing in the browser - use the FileReader API:

function calculateHash(file, callback) {  
  let reader = new FileReader();
  reader.onload = function(event) {
    let file_sha1 = sha1(reader.result);
    callback(file_sha1);
  };
  reader.readAsArrayBuffer(file);
}

let input = document.getElementById("input-file"),
    info = document.getElementById("info");

input.addEventListener("change", function(event) {
  let file = input.files[0];
  
  if (file) {
    calculateHash(file, function(file_sha1) {
      info.textContent = file_sha1;
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js"></script>

<input id="input-file" type="file">
<div id="info"></div>

Requires js-sha1 (npm install js-sha1).

Credit to: How to checksum the file to be uploaded with javascript?

le_m
  • 19,302
  • 9
  • 64
  • 74
  • can you explain what to do in here : reader.onload = function(event) { var contents = event.target.result; // Hash your contents here... info.textContent = contents; } – user1526912 Jun 18 '16 at 02:53
  • *"I would like to get the same checksum result from the data url in my browser"* - my answer is: don't use the data URL, but the file content to get the checksum in your browser. You would need to plug in your sha1 hashsum generator where the comment is, hashing `content`. – le_m Jun 18 '16 at 03:00
  • Isnt event.target.result the same as data url ? What do you mean by use the file content...what part of the file blob should i use... sorry but I'm a beginner – user1526912 Jun 18 '16 at 03:14
  • "Run code snippet" doesn't work with this Github link. Consider using a CDN here. – denis.peplin Feb 02 '19 at 04:23
  • 1
    @denis.peplin Thanks for letting me know, it should work again now. – le_m Feb 02 '19 at 19:17
  • Does the algorithm here loads the whole file ? If we do it for big images or let's say a video, I guess it would be better to read the file chunk by chunk so we dont overload the memory ? – aroy314 Jun 23 '22 at 15:59