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

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

前書き

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

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

create-react-app

bash

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

js-md5

今回はMD5というハッシュ関数を使ってファイルをハッシュ化します

js-md5という簡単にハッシュ化できるライブラリがあったのでそれを使います
js-md5へのリンク

bash

$ 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; 

結果

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

楽しいですね！！