Reactで react-dropzone と axiosを使ってファイルアップロードを実装してみる(バックエンドはRails)

Reactで react-dropzone と axiosを使ってファイルアップロードを実装してみる(バックエンドはRails)

Reactで react-dropzone と axiosを使ってファイルアップロードを実装してみる(バックエンドはRails)

Reactで react-dropzone と axiosを使ってファイルアップロードを実装してみる(バックエンドはRails) へのコメントはまだありません

はじめに

Reactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。
あまり深く調べてはないが、1つめに良さそうだと感じた react-dropzone を使ってみたら、
これがかなりいい!!

あまりに気に入ってしまったので、react-dropzoneでアップロード対象のファイルを選んで、
axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。
Reactのことは分かっている前提ですすめますので、あしからず。

出来上がりのイメージはこんな感じ
画面左上に ファイルをドロップする場所があり、その右側にドロップされたファイルを列挙する場所がある。
で、画面下部にアップロード対象ファイルのプレビュー表示。

dropzone-2

npm で必要なものをインストール

アップロード画面実装

一気に貼り付けちゃいましたので、ざっと説明しておきます。
DropZone タグで、ドラッグドロップでファイルをアップロードできる機能が
できちゃいます。acceptプロパティで受け付ける画像の種類(ファイルの種類)を指定し、
onDropでドラッグドロップされた時の処理を実装します。

今回はonDropで受付可能なファイル、不可能なファイルを引数で受け取り、
ステートを変えて、ドロップ領域の右側にそれらのファイル名を列挙します。
と同時に、画面下部に受付可能なファイルのプレビューを表示しちゃいます。

これがいとも簡単なんです。びっくりですよ。

アップロードボタンがクリックされたら、FormData オブジェクトを作り、
そこにアップロード対象のファイルを詰め込んで、axiosでPOSTします。
たったこれだけなんですよ、ホント便利ですね。

何個のファイルがアップロードされるかは不定なので、
file_1、file_2、file_3のような連番の名前をつけておきます。

サーバーサイドの実装

Railsの実装になります。
まず最初に渡ってきたパラメーター(:name)に従ってフォルダを作ります。
今回の例では Tomさん固定です。

で、file_1、file_2、file_3と連番でアップロードされてきたファイルを
そのフォルダに保存します。

ね、簡単でしょ。

デザインCSS

とりあえず、適当ですが、こんな感じで。

あとがき

出来上がってみれば、本当に簡単に出来てしまったように見えるのですが・・・

画像をPOSTした時
Rails側で

– 422 unprocessable entity
– Invalid form authenticity token

というエラーが出て悩まされました。CSRFについては分かってるつもりだったのですが、
分かってなかったようです。
ReactでSPAを作る時なんかは JSをサーブするサーバーと、APIをサーブするサーバーが
別になると思うので、

gem rack-cors を導入して、信用できるドメインを絞り込んで APIを受け付ける。
で、CSRFは ApplicationControllerで

– protect_from_forgery with: :null_session

として、とりあえず何でも受け付けるようにする。という感じでしょうか。


About the author:

Tags:

Related Posts

Leave a comment

Back to Top