読者です 読者をやめる 読者になる 読者になる

あざらし備忘録。

渋谷ではたらく音ゲー大好きウェッブエンジニアがいろいろ思った事やった事を書いていくブログです

React+Reduxでreact-dropzoneを用いてファイルアップロードを行うサンプルを作ってみた[JavaScript][ES6]

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

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

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

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プロパティにて指定されたコールバックが実行される。

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

  • 複数ファイルの選択を許可するか(multiple: デフォルトtrue)
  • ウィンドウをクリックした時にアップロードファイルを選択する画面を表示するかどうか(disableClick: デフォルトfalse)
  • プレビューを表示するかどうか(disablePreview: デフォルトfalse)

デザインに関しても外から好きに渡せるので、カスタマイズしてあげれば良さそう

  • style 基本のstyle
  • activeStyle acceptedな時のstyle
  • rejectStyle rejectedな時のstyle

の三種類のstyleを渡せるようになっている。

styleを基本として、accepted/rejectedなstyleがマージされて適用されるイメージ。

本体のソースもとても小さいものなので一通り見ると良さそう

https://github.com/okonet/react-dropzone/blob/master/src/index.js

所感

一通りいじってみたけど特段苦労はしなかった感じ。

あとは今回はサーバーと繋いで実際にファイルのやり取りを行うところまでいけてないのでそのあたりで躓かなければスムーズっぽい。

サーバーとのやり取りのところも公式のREADMEにSuperAgentを用いたサンプルが出ているので割と楽には出来そうな感じはある。