[JS]ファイルを読み込んでハッシュ化しよう

前書き

ローカルのファイルを読み込んでそれをハッシュ化するという機能を実装する機会があったの方法をまとめておきます

ブロックチェーンのハッカソンとかで使う機会があるかもしれないです

create-react-app

$ npx create-react-app hash
$ cd hash
$ npm start

js-md5

今回はMD5というハッシュ関数を使ってファイルをハッシュ化します
js-md5という簡単にハッシュ化できるライブラリがあったのでそれを使います
js-md5へのリンク

$ npm install --save js-md5

実装例

App.jsを書き換えましょう

App.js

import React, { Component } from "react";
import md5 from 'js-md5';

class App extends Component {
  constructor(props) {
    super(props);
  this.state = {
    hash: null
  }
}

 getMd5 = () => {
   const element = document.getElementById('file');

   //ファイルが選択されたか
   if(!(element.value)) return;

   //FileReaderクラスに対応しているか
   if (!(window.FileReader)) return;

   //0番目のファイルオブジェクトを取得
   const file = element.files[0];

   //FileReaderオブジェクトを生成
   const fileReader = new FileReader();

   //読み込み時に実行されるイベント
   fileReader.onload = function () {
     const res = fileReader.result;
     //MD5ハッシュ関数でハッシュ化
     const hash = md5(res);
     this.setState({hash})
   }.bind(this); //関数をbindしないとhashをsetStateできない

   //読み込みを開始する(ArrayBufferオブジェクトを得る)
   fileReader.readAsArrayBuffer(file);
 }

 render() {
   return (
     <div className="App" align="center">
       <input type='file' id='file' onChange={this.getMd5}></input>
       <p>{this.state.hash}</p>
     </div>
   );
 }
}
export default App;

結果

こんな感じでファイルのハッシュ値が表示されます
楽しいですね！！