今回はフロント側だけでファイルアップロードのサンプルを作ってみた。

あとはサーバーにファイルの情報を送れば良いだけなのでいつも通りな方向に持っていけそう。

遊んでみたリポジトリはこちら。

github.com

ファイルアップロード用のライブラリとしてはreact-dropzoneを使ってみた。

github.com

パッと検索した限りだとこのライブラリと、あともう一つ名前のよく似たreact-dropzone-componentが目についたけど、今回はreact-dropzoneの方を選択。

github.com

理由はシンプルそうだったから。

後者の方はリッチな感じに仕上がっていたけどその分外部ライブラリに依存していたり、導入がちょっと面倒そう＆メンテとか考えた時にうーんという感じになったので見送り。

実際今回使った方は1ファイルでできてる程度にはシンプルだったので中身はだいぶ見やすかった。

まぁまぁスムーズに行けそうな感じがつかめたので、趣味プロダクトにちょっと突っ込んでみて見ようかなーと思う。

以下、READMEの転載。

react-redux-file-upload-example

React+Redux環境に react-dropzone を入れてみてフロント側のファイルアップロードをして遊んでみるテスト

react-dropzone

https://github.com/okonet/react-dropzone

install

npm install --save react-dropzone

usage

import Dropzone from 'react-dropzone'

// ...

<Dropzone
  onDrop={func}
  onDropAccepted={func}
  onDropRejected={func}
  accept="image/gif,image/jpeg,image/png,image/jpg" >
    <div>
      ファイルを指定またはドラッグ&ドロップ
      <p>形式: gif/png/jpeg/jpg</p>
    </div>
</Dropzone>

ファイル選択後に実行するコールバックに関してはonDropプロパティで指定できる。

ファイル形式の制限もacceptプロパティを使ってカンマ区切りで行える。

ファイル形式の制限に選択したファイルが全て則っていた場合はonDropAcceptedプロパティにて指定されたコールバックを実行し、則っていないファイルが一つでもあった場合にはonDropRejectedプロパティにて指定されたコールバックが実行される。

今回は指定してないが以下のような設定も可能