Generate An MD5 Hash of An Image Using HTML5 / JavaScript

Question

Using the HTML5 File API and any JavaScript crypto library, how can I generate an MD5 hash of the file?

To read the file:

var reader = new FileReader();

reader.onload = function(e) {
  var contents = e.target.result;
  // What goes here?
};

reader.readAsBinaryString(data.files[0]);

Maximillian Laumeister · Accepted Answer · 2015-07-06 00:10:19Z

5

This goes there:

var reader = new FileReader();

reader.onload = function(e) {
  var contents = e.target.result;
  // This goes here:
  var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(contents));
};

Be sure you include the CryptoJS library:

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>

edited Jul 6, 2015 at 0:10

answered Jul 5, 2015 at 23:51

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Undistraction Over a year ago

Thanks. That gives me a hash, but it is not the correct hash (compared to Ruby, bash and an online JS hasher).

Maximillian Laumeister Over a year ago

Are you using reader.readAsBinaryString to load in the file?

Undistraction Over a year ago

Yes I am using reader.readAsBinaryString(data.files[0]); (added to my question). I've also tried using reader.onloadend for the callback.

Maximillian Laumeister Over a year ago

I just did some more research, and found that it may have to do with the string encoding. Try my edited answer, which adds an encoding step.

Aaron Cicali Over a year ago

CryptoJS.MD5() returns an object, you'll have to call its toString() method to get the MD5 string.

|

Collectives™ on Stack Overflow

Generate An MD5 Hash of An Image Using HTML5 / JavaScript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related