How to calculate md5 hash of a file using javascript

Question

Is there a way to calculate the MD5 hash of a file before the upload to the server using Javascript

User · Answer

There is a couple scripts out there on the internet to create an MD5 Hash.

The one from webtoolkit is good, http://www.webtoolkit.info/javascript-md5.html

Although, I don't believe it will have access to the local filesystem as that access is limited.

User · Answer

With current HTML5 it should be possible to calculate the md5 hash of a binary file  But I think the step before that would be to convert the banary data BlobBuilder to a String  I am trying to do this step  but have not been successful   Here is the code I tried  Converting a BlobBuilder to string  in HTML5 Javascript

User · Answer

To get the hash of files  there are a lot of options  Normally the problem is that it s really slow to get the hash of big files   I created a little library that get the hash of files  with the 64kb of the start of the file and the 64kb of the end of it   Live example  http   marcu87 github com hashme  and library  https   github com marcu87 hashme

User · Answer

You need to to use FileAPI  It is available in the latest FF  amp  Chrome  but not IE9  Grab any md5 JS implementation suggested above  I ve tried this and abandoned it because JS was too slow  minutes on large image files   Might revisit it if someone rewrites MD5 using typed arrays   Code would look something like this   HTML        lt input type  file  id  file-dialog  multiple  true  accept  image    gt   JS  w JQuery       file-dialog   change function       handleFiles this files        function handleFiles files        for  var i 0  i lt files length  i              var reader   new FileReader            reader onload   function             var md5   binl md5 reader result  reader result length               console log  MD5 is     md5                      reader onerror   function                 console error  Could not read the file                       reader readAsBinaryString files item i

User · Answer

Apart from the impossibility to get   file system access in JS  I would not   put any trust at all in a   client-generated checksum  So   generating the checksum on the server   is mandatory in any case      Tomalak   Apr 20  09 at 14 05   Which is useless in most cases  You want the MD5 computed at client side  so that you can compare it with the code recomputed at server side and conclude the upload went wrong if they differ  I have needed to do that in applications working with large files of scientific data  where receiving uncorrupted files were key  My cases was simple  cause users had the MD5 already computed from their data analysis tools  so I just needed to ask it to them with a text field

User · Answer

While there are JS implementations of the MD5 algorithm  older browsers are generally unable to read files from the local filesystem   I wrote that in 2009  So what about new browsers   With a browser that supports the FileAPI  you  can   read the contents of a file - the user has to have selected it  either with an  lt input gt  element or drag-and-drop  As of Jan 2013  here s how the major browsers stack up    FF 3 6 supports FileReader  FF4 supports even more file based functionality Chrome has supported the FileAPI since version 7 0 517 41 Internet Explorer 10 has partial FileAPI support Opera 11 10 has partial support for FileAPI Safari - I couldn t find a good official source for this  but this site suggests partial support from 5 1  full support for 6 0  Another article reports some inconsistencies with the older Safari versions

User · Answer

it is pretty easy to calculate the MD5 hash using the MD5 function of CryptoJS and the HTML5 FileReader API  The following code snippet shows how you can read the binary data and calculate the MD5 hash from an image that has been dragged into your Browser   var holder   document getElementById  holder     holder ondragover   function       return false      holder ondragend   function       return false      holder ondrop   function event      event preventDefault       var file   event dataTransfer files 0     var reader   new FileReader       reader onload   function event        var binary   event target result      var md5   CryptoJS MD5 binary  toString        console log md5           reader readAsBinaryString file        I recommend to add some CSS to see the Drag  amp  Drop area    holder     border  10px dashed  ccc    width  300px    height  300px      holder hover     border  10px dashed  333      More about the Drag  amp  Drop functionality can be found here  File API  amp  FileReader  I tested the sample in Google Chrome Version 32

User · Answer

I don t believe there is a way in javascript to access the contents of a file upload   So you therefore cannot look at the file contents to generate an MD5 sum   You can however send the file to the server  which can then send an MD5 sum back or send the file contents back    but that s a lot of work and probably not worthwhile for your purposes

User · Answer

hope you have found a good solution by now  If not  the solution below is an ES6 promise implementation based on js-spark-md5  import SparkMD5 from  spark-md5       Read in chunks of 2MB const CHUCK SIZE   2097152          Incrementally calculate checksum of a given file based on MD5 algorithm     export const checksum    file    gt    new Promise  resolve  reject    gt        let currentChunk   0      const chunks   Math ceil file size   CHUCK SIZE       const blobSlice         File prototype slice          File prototype mozSlice          File prototype webkitSlice      const spark   new SparkMD5 ArrayBuffer        const fileReader   new FileReader         const loadNext        gt          const start   currentChunk   CHUCK SIZE        const end           start   CHUCK SIZE  gt   file size   file size   start   CHUCK SIZE            Selectively read the file and only store part of it in memory           This allows client-side applications to process huge files without the need for huge memory       fileReader readAsArrayBuffer blobSlice call file  start  end                fileReader onload   e   gt          spark append e target result         currentChunk           if  currentChunk  lt  chunks  loadNext          else resolve spark end                 fileReader onerror        gt          return reject  Calculating file checksum failed                loadNext

User · Answer

HTML5     spark-md5 and Q Assuming your e using a modern browser  that supports HTML5 File API   here s how you calculate the MD5 Hash of a large file  it will calculate the hash on variable chunks   x000D   x000D  function calculateMD5Hash file  bufferSize      var def   Q defer       var fileReader   new FileReader      var fileSlicer   File prototype slice    File prototype mozSlice    File prototype webkitSlice    var hashAlgorithm   new SparkMD5      var totalParts   Math ceil file size   bufferSize     var currentPart   0    var startTime   new Date   getTime       fileReader onload   function e        currentPart    1       def notify         currentPart  currentPart        totalParts  totalParts              var buffer   e target result      hashAlgorithm appendBinary buffer        if  currentPart  lt  totalParts          processNextPart          return             def resolve         hashResult  hashAlgorithm end          duration  new Date   getTime   - startTime                 fileReader onerror   function e        def reject e           function processNextPart         var start   currentPart   bufferSize      var end   Math min start   bufferSize  file size       fileReader readAsBinaryString fileSlicer call file  start  end           processNextPart      return def promise     function calculate        var input   document getElementById  file      if   input files length        return         var file   input files 0     var bufferSize   Math pow 1024  2    10     10MB    calculateMD5Hash file  bufferSize  then      function result             Success       console log result              function err             There was an error             function progress             We get notified of the progress as it is executed       console log progress currentPart   of   progress totalParts   Total bytes    progress currentPart   bufferSize   of   progress totalParts   bufferSize             x000D   lt script src  https   cdnjs cloudflare com ajax libs q js 1 4 1 q js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs spark-md5 2 0 2 spark-md5 min js  gt  lt  script gt    lt div gt     lt input type  file  id  file   gt     lt input type  button  onclick  calculate     value  Calculate  class  btn primary    gt   lt  div gt  x000D   x000D   x000D

User · Answer

The following snippet shows an example  which can archive a throughput of 400 MB s while reading and hashing the file  It is using a library called hash-wasm  which is based on WebAssembly and calculates the hash faster than js-only libraries  As of 2020  all modern browsers support WebAssembly   x000D   x000D  const chunkSize   64   1024   1024  const fileReader   new FileReader    let hasher   null   function hashChunk chunk      return new Promise  resolve  reject    gt        fileReader onload   async e    gt          const view   new Uint8Array e target result         hasher update view         resolve                fileReader readAsArrayBuffer chunk            const readFile   async file    gt      if  hasher        hasher init        else       hasher   await hashwasm createMD5           const chunkNumber   Math floor file size   chunkSize      for  let i   0  i  lt   chunkNumber  i          const chunk   file slice        chunkSize   i        Math min chunkSize    i   1   file size             await hashChunk chunk          const hash   hasher digest      return Promise resolve hash       const fileSelector   document getElementById  file-input    const resultElement   document getElementById  result     fileSelector addEventListener  change   async event    gt      const file   event target files 0      resultElement innerHTML    Loading        const start   Date now      const hash   await readFile file     const end   Date now      const duration   end - start    const fileSizeMB   file size   1024   1024    const throughput   fileSizeMB    duration   1000     resultElement innerHTML         Hash    hash  lt br gt      Duration    duration  ms lt br gt      Throughput    throughput toFixed 2   MB s          x000D   lt script src  https   cdn jsdelivr net npm hash-wasm  gt  lt  script gt   lt  -- defines the global  hashwasm  variable -- gt    lt input type  file  id  file-input  gt   lt div id  result  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I ve made a library that implements incremental md5 in order to hash large files efficiently  Basically you read a file in chunks  to keep memory low  and hash it incrementally  You got basic usage and examples in the readme   Be aware that you need HTML5 FileAPI  so be sure to check for it  There is a full example in the test folder   https   github com satazor SparkMD5

[javascript] How to calculate md5 hash of a file using javascript

Examples related to javascript

Examples related to md5