react-dropzoneの紹介と実装サンプル


Reactで使えるドラッグドロップのライブラリが非常に良かったのでメモ。

シンプルに使える上にできることが多い。

 

フレームワークとして Next.jsMaterial UI を使っています。

サンプルコードを少し変えつつ動かしてみます。

参照

github README よりは、下のドキュメントの方がサンプルがあるので情報量が多いです。サンプルは examples/ でも見えますが実際に動かせるのでわかりやすい。

サンプルコード

まず Next.js で動かしてみます。

様々なコンポーネント形式で動かせますが基本的にフックを使っていきます。

 

サンプルコードに accept を追加。

ドロップエリアにファイルをドラッグすると isDragActivetrue になります。

かなりシンプルに書けますね。

 

ここにファイルをドロップすると、accept したファイルのみ配列形式で onDrop 関数に入ってきます。

 

またクリックした場合は対象ファイルしか選べないようにしてくれます。

実践(Material UI

Material UI を使ってそれっぽく書くとこんな感じになります。

実践(投稿画像表示

URL.createObjectURL() を用いて画像パスをセットします。

必要なら revokeObjectURL() も追加する。

見た目の調整

isDragAcceptisDragReject などを使って判定することでドラッグ時の見た目を変えることもできます。便利だけど maxFiles による reject に反応しないのでファイル拡張子の判定だけ。

エラーメッセージ

Reject されたファイルを取ってくる場合には fileRejections を使います。

この用途としてはエラーメッセージを表示するくらい?

 

あとは open を使ってドラッグ&ドロップ部とクリックボタンを分けたり、file のプロパティを拡張したりするサンプルもありますが、今のところ使いそうにないのでとりあえず眺めるだけ。

ユーザローカルファイルを扱うのにこれ以上ないくらい便利そうです。


コメントを残す

メールアドレスが公開されることはありません。