作成したもの
サイトのページのある個所にファイルをドラッグ＆ドロップすると、アップロードができる機能を見たことがあるかもしれません。
↓のようなやつです。
Reactで実装可能かを探していると、react-dropzoneで可能のようです。
実装のサンプルも一応できたので、本記事で公開します。
ちなみに、以下のサンプルでは、このサーバーにファイルをアップロードはしません。
クライアント側の処理で、「ファイル」の下にファイル名とファイルサイズの情報が出るだけです。
react-dropzoneを使ったコード例 （CodeSandBox）
CodeSandBoxで作成。
・ドロップしたファイル名・サイズをリストに追加
・ファイルが上に来た時にStyleを変える
ということを、しています。
ちなみに、本家サイトの実装例を参考にしました。
・Basic example （ファイルをリストに追加）
・Styling Dropzone（Styleを変える処理の実装）
ちなみに、本家サイトの実装例ではisDragActiveがありますが、実際どういうイベントの際に機能するものか判然としませんでしたので、省いています（見た目上、問題ないし）。
今回、CodeSandBoxを使用しましたが、試験的にコーディングをする際にも便利そうですね。
以上です。
