MD5 hash of a file using javascript

Question

I have to upload a file from the front end and calculate the md5 hash of the file. I tried to use crypto.js to generate the md5 but for images it is giving me wrong md5. I saw a website called onlinemd5.com and it is exactly what I need.

Can anyone help me how to calculate the md5 hash of a file(text file, images, videos etc) using javascript? Is it possible to download the code from http://onlinemd5.com and implement it?

Note: I tried some of the suggestions in How to calculate md5 hash of a file using javascript but of no use.

$scope.upld = function(element){
    $scope.files = element.files;
    var file = $scope.files[0];
    var reader = new FileReader();
    reader.onload = function(){
        $scope.md5_val = CryptoJS.MD5(reader.result);
        $scope.upload_file();
        $scope.$apply();
    };
    reader.readAsBinaryString(file);
};

The crypto.js is not calculating the image md5 correctly. I did not try the sparkmd5 js though.

Please describe what exactly you tried and how it didn't work. For example: First I ran a, but it threw errors, so I tried b instead but the result was c, which I didn't expect because I was looking for a pattern like d. — Seth Holladay
– Seth Holladay, Commented Feb 10, 2015 at 16:52
I am sorry I should have posted the code with my question. Please find it below — Mustang
– Mustang, Commented Feb 10, 2015 at 17:38
I tried to use the js at webtoolkit.info/javascript-md5.html and uploaded an image file called koala.jpg from the Pictures folder. It calculates the md5 as '4f413976a7a4b93d19c06e94fae0899d' where as I get a different hash value from onlinemd5.com — Mustang
– Mustang, Commented Feb 10, 2015 at 17:54
I tried to use the js at - github.com/sagens42/md5asm. It gives me empty string for md5 value. Here's the code: var calcS = new md5(reader.result); $scope.md5Value = calcS.getMd5(); — Mustang
– Mustang, Commented Feb 10, 2015 at 17:56

Phylogenesis · Accepted Answer · 2021-11-08 12:35:50Z

7

I got it to work using reader.readAsArrayBuffer():

$(inputElement).change(
    function () {
        var reader = new FileReader();
        
        reader.addEventListener(
            'load',
            function () {
                var wordArray = CryptoJS.lib.WordArray.create(this.result);
                console.log(CryptoJS.MD5(wordArray));
            }
        );
        
        reader.readAsArrayBuffer(this.files[0]);
    }
);

I had to add an extra dependency from CryptoJS: https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js

jsFiddle here.

edited Nov 8, 2021 at 12:35

answered Feb 11, 2015 at 15:27

Phylogenesis

7,90024 silver badges27 bronze badges

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

2 Comments

GeekInDisguise Over a year ago

When I try on jsFiddle it says "Uncaught TypeError: Failed to construct 'FileReader': Please use the 'new' operator, this DOM object constructor cannot be called as a function." What would you suggest about this?

Phylogenesis Over a year ago

@Kubuntuer82 I have updated the jsFiddle link as required for this to continue working.

Mustang · Accepted Answer · 2015-02-12 17:50:42Z

5

I used the spark-md5.js from https://github.com/satazor/SparkMD5 It is awesome and pretty fast. This is the best solution if some one is trying to calculate the md5 of any uploaded file.

answered Feb 12, 2015 at 17:50

Mustang

6042 gold badges14 silver badges34 bronze badges

Collectives™ on Stack Overflow

MD5 hash of a file using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related