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, Feb 10 '15 at 16:52
I am sorry I should have posted the code with my question. Please find it below — Mustang, Feb 10 '15 at 17:38
I tried to use the js at http://www.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, Feb 10 '15 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, Feb 10 '15 at 17:56

Phylogenesis · Answer 1 · 2021-11-08T12:35:50.207

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 08 '21 at 12:35

answered Feb 11 '15 at 15:27

Phylogenesis

7,775
19
27

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? – Kubuntuer82 Nov 04 '21 at 19:29
@Kubuntuer82 I have updated the jsFiddle link as required for this to continue working. – Phylogenesis Nov 08 '21 at 12:36

score 5 · Accepted Answer · answered Feb 12 '15 at 17:50

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 '15 at 17:50

Mustang

604
2
13
32

MD5 hash of a file using javascript

2 Answers2

Linked