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 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 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.

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. 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. 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.

• javascript
• file-upload
• md5

• 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 Commented Feb 10, 2015 at 16:52
• Please elaborate on the "but of no use."... – sebnukem Commented Feb 10, 2015 at 16:53
• I am sorry I should have posted the code with my question. Please find it below – 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. – Mustang Commented Feb 10, 2015 at 17:54
• I tried to use the js at - github./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 Commented Feb 10, 2015 at 17:56

2 Answers 2

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./ajax/libs/crypto-js/4.1.1/crypto-js.min.js

jsFiddle here.

I used the spark-md5.js from https://github./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.