Utilizing CryptoJS to generate a hash value for uploaded files has presented me with a challenge. Despite my efforts, all files I upload seem to produce identical hash values. It appears that the issue lies within my "onFileChange" function, but pinpointing the mistake is proving to be elusive. Any assistance in resolving this matter would be greatly 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());
};
// Display file details after upload
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);
https://i.sstatic.net/Y75Ju.png
Expected result: https://i.sstatic.net/314WZ.png