react-dropzoneでファイルの指定をシンプル実装

ファイル指定の為のコンポーネントライブラリである、react-dropzoneを最近知ったので、復習も兼ねて記事にしてみます。
この辺りを自前で実装しようと思うと意外に面倒くさいことが多いと思うのですが、このライブラリを使うとその辺りの面倒事が隠蔽されていて大変便利でした。

公式サイト

react-dropzone

インストール

npm install --save react-dropzone
or
yarn add react-dropzone

サンプル

下の処理では画像ファイルのみを受け付ける、「select files」エリアにファイルをドラックするかクリックしてファイルを指定し、指定したファイルが画像ファイルであれば、onDropAccepted関数内で何らかの処理をします。画像ファイルでなければ、onDropRejected関数でエラー処理をします。

指定されるファイルを制限するにはuseDropzoneに渡すpropsでacceptを指定します。指定方法は許可するメディアタイプを指定すればOKです。

import {useCallback} from 'react';
import {useDropzone} from 'react-dropzone';

function App() {
 const onDropAccepted = useCallback(files => {
   console.log('accecepted files', files);
   // TODO 指定ファイルに対してなんらかの処理
 }, []);

 const onDropRejected = useCallback(files => {
   console.log('rejected files', files);
   // TODO エラーファイル処理
 }, []);

 const {getRootProps, getInputProps} = useDropzone({
   accept: ['image/*'],
   onDropAccepted,
   onDropRejected,
 });

 return (
   <div className="App">
     <div {...getRootProps()}>
       <span>select file</span>
       <input {...getInputProps()} />
     </div>
   </div>
 );
}

export default App;

すごく簡単でした。