CryptoJS 为不同的文件创建相同的哈希值

Question

I am using CryptoJS to create a hash value of the upload file. However, all files that I upload produce the same hash value. I know that the issue is inside my "onFileChange" call, but I'm not sure what I am doing wrong here. Any help would be appreciated.

import React, { Component } from 'react'; 
import { connect } from 'react-redux';
import '../CSS/FileSelectorCSS.css';
var CryptoJS = require("crypto-js");

class FileSelectorComponent extends Component {

    state = {

        // Initially, no file is selected 
        selectedFile: null
    };

    // On file select (from the pop up) 
    onFileChange = event => {
        var text = '';
        // Update the state 
        this.setState({ selectedFile: event.target.files[0] });

        var reader = new FileReader();

        reader.onloadend = function () {
            text = (reader.result);
        }

        reader.readAsBinaryString(event.target.files[0]);

        var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));

        console.log(hash.toString());
    };

    // File content to be displayed after 
    // file upload is complete 
    fileData = () => {

        if (this.state.selectedFile) {

            return (
                <div>
                    <h2>File Details:</h2>
                    <p>File Name: {this.state.selectedFile.name}</p>
                    <p>File Type: {this.state.selectedFile.type}</p>
                    <p>
                        Last Modified:{" "}
                        {this.state.selectedFile.lastModifiedDate.toDateString()}
                    </p>
                </div>
            );
        } 
    };

    render() {

        return (
            <div>
                <div>
                    <input type="file" onChange={this.onFileChange} />
                </div>
                {this.fileData()}
            </div>
        );
    }
} 

export default connect()(FileSelectorComponent);

Expected value:

Answer 1

You are calculating your hash before the reader gets loaded.

The hash "d41d8cd98f00b204e9800998ecf8427e" is the MD5 hash of an empty string.

There lines :

reader.onloadend = function () {
  text = (reader.result);
}

mean that the text variable will be assigned the result when the reader finished loading, asynchronously . But by that time, the rest of the function has already been executed.

So you need to make sure that the process takes place after the text variable gets its new value, like this :

reader.onloadend = function () {
  text = (reader.result);

  reader.readAsBinaryString(event.target.files[0]);
  var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));
  console.log(hash.toString());
}

Answer 2

  // On file select (from the pop up) 
onFileChange = event => {
    var text = '';
    // Update the state 
    this.setState({ selectedFile: event.target.files[0] });
    console.log(event.target.files[0]);
    var reader = new FileReader();

    reader.onloadend = function () {
        text = (reader.result);
        var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));
        console.log(hash.toString());
    }

    reader.readAsBinaryString(event.target.files[0]);

    //console.log(text);
   

    //console.log(hash.toString());
};

CryptoJS needs to be placed inside the callback function. It fixed my issue.