【react】react-file-readerでファイルをアップロードする

reactで一つのファイルをアップロードしたかったのでnpmが出している

react-file-readerなるものを使ってみました。

使い方はアップロードに特化しているだけあってかなりシンプルでした。

以下がサンプルの使用方法↓

</pre>
handleFiles(files){
console.log(files)
}

<ReactFileReader handleFiles={this.handleFiles}>
<button className='btn'>アップロード</button>
</ReactFileReader>
<pre>

以上で基本的な実装は終了。とてもシンプル。

console.logで値が返ってくることが確認できれば後はfilereaderで読み込むなどして

自由に使うことができます。

使えるプロパティは「elementid」(idを意味する)

例：elementId=”hoge”

「base64」(返ってくる値をbase64にするかどうか)

例：base64={true)

「multipleFiles」(ファイルを複数送りたい時に使う。これがtrueの時に実行可能)

例：multipleFiles={true)

「filetype」(拡張子を選ぶ)

例：fileTypes={[“.png”,”.jpg”]}),

全部乗せした結果がこちら↓

</pre>
handleFiles(files){
console.log(files.base64)
}

<ReactFileReader fileTypes={[".jpg",".png"]} base64={true} multipleFiles={true} handleFiles={this.handleFiles}>
<button className='btn'>Upload</button>
</ReactFileReader>
<pre>

恐らくはinput_fileの仲間なのでやはりファイルを扱う系のライブラリはセキュリティに厳しいもよう。

なのでこれくらいの制約をつけたほうが安全かもしれないです。

以上がreact-file-readerの使用方法です。国内のレビューが少なかったので

知名度こそは無いですがシンプルでinput_fileの特徴が分かっていればすぐ触れるのでおすすめです。