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

2017年4月24日コメントはまだありません

はじめに

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

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

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

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

$ npm install --save react-dropzone axios

1	$ npm install --save react-dropzone axios

アップロード画面実装

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

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

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

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

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

import React from "react"
import DropZone from "react-dropzone"
import axios from "axios"
import {HOST_NAME} from "../constants/index"

class Upload extends React.Component {
  constructor(props){
    super(props)
    this.state = {acceptedfiles: [],rejectedfiles: []}
  }

  handleDrop(accepted, rejected) {
    this.setState({acceptedfiles: accepted, rejectedfiles: rejected})
  }

  handleOpenClick() {
    this.dropzone.open()
  }

  handleUpload() {

    let data = new FormData()
    data.append('name', 'Tom')
    data.append('age', '28')

    let cnt = 1
    this.state.acceptedfiles.map(file =>{
      data.append('file_' + cnt, file)
      cnt+=1
    })

    axios.post(HOST_NAME + '/upload_image', data)


  }

  render(){
    let prev = []
    this.state.acceptedfiles.map(f =>
      prev.push(
        <div className="preview">
          <img key={f.name} src={f.preview} width="100" height="100" />
        </div>
      )
    )

    return (
      <section>
        <div className="uploadFile">
          Hello Upload...
          <DropZone
            ref={(node) => this.dropzone = node}
            accept="image/jpg,image/png"
            onDrop={(accepted, rejected)=> this.handleDrop(accepted, rejected)}
          >
            ここにファイルをドロップしてください。
          </DropZone>
          <button type="button" onClick={(e) => this.handleOpenClick(e)}>
              Open Dropzone
          </button>
          <button type="button" onClick={(e) => this.handleUpload(e)}>
              Upload実行
          </button>
        </div>
        <div className="uploadFile">
          <h2>Accepted files...</h2>
          <ul>
            {this.state.acceptedfiles.map(f => <li key={f.name}>{f.name} - {f.size}</li>)}
          </ul>
        </div>
        <div className="uploadFile">
          <h2>Rejected files...</h2>
          <ul>
            {this.state.rejectedfiles.map(f => <li key={f.name}>{f.name} - {f.size}</li>)}
          </ul>
        </div>
        <br className="clear" />
        <div>
          <h2>Preview</h2>
          {prev}
          <br className="clear" />
        </div>
      </section>
    )
  }
}

export default Upload

import React from "react"

import DropZone from "react-dropzone"

import axios from "axios"

import {HOST_NAME} from "../constants/index"

class Upload extends React.Component {

constructor(props){

super(props)

this.state = {acceptedfiles: [],rejectedfiles: []}

}

handleDrop(accepted, rejected) {

this.setState({acceptedfiles: accepted, rejectedfiles: rejected})

}

handleOpenClick() {

this.dropzone.open()

}

handleUpload() {

let data = new FormData()

data.append('name', 'Tom')

data.append('age', '28')

let cnt = 1

this.state.acceptedfiles.map(file =>{

data.append('file_' + cnt, file)

cnt+=1

})

axios.post(HOST_NAME + '/upload_image', data)

}

render(){

let prev = []

this.state.acceptedfiles.map(f =>

prev.push(

</div>

)

return (

Hello Upload...

<DropZone

ref={(node) => this.dropzone = node}

accept="image/jpg,image/png"

onDrop={(accepted, rejected)=> this.handleDrop(accepted, rejected)}

ここにファイルをドロップしてください。

</DropZone>

<button type="button" onClick={(e) => this.handleOpenClick(e)}>

Open Dropzone

</button>

<button type="button" onClick={(e) => this.handleUpload(e)}>

Upload実行

</button>

</div>

<h2>Accepted files...</h2>

<ul>

{this.state.acceptedfiles.map(f => <li key={f.name}>{f.name} - {f.size}</li>)}

</ul>

</div>

<h2>Rejected files...</h2>

<ul>

{this.state.rejectedfiles.map(f => <li key={f.name}>{f.name} - {f.size}</li>)}

</ul>

</div>

<div>

<h2>Preview</h2>

{prev}

</div>

</section>

)

}

export default Upload

サーバーサイドの実装

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

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

ね、簡単でしょ。

  def upload_image
    image_path = Rails.root.to_s + "/public/upload_images/" + params[:name]
    FileUtils.mkdir_p(image_path) unless FileTest.exist?(image_path)

    cnt = 1
    while true do
      break if params["file_" + cnt.to_s].blank?
      file = params["file_" + cnt.to_s]
      fname = file.original_filename

      File.open(image_path + "/#{fname}", 'wb') { |f|
        f.write(file.read)
      }
      cnt += 1
    end
  end

def upload_image

image_path = Rails.root.to_s + "/public/upload_images/" + params[:name]

FileUtils.mkdir_p(image_path) unless FileTest.exist?(image_path)

cnt = 1

while true do

break if params["file_" + cnt.to_s].blank?

file = params["file_" + cnt.to_s]

fname = file.original_filename

File.open(image_path + "/#{fname}", 'wb') { |f|

f.write(file.read)

}

cnt += 1

end

デザインCSS

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

div.uploadFile{
  float: left;
  width: 260px;
}

div.preview {
  float: left;
  padding: 10px;
  border: 1px solid #cccccc;
}

br.clear {
  clear: both;
}

div.uploadFile{

float: left;

width: 260px;

}

div.preview {

float: left;

padding: 10px;

border: 1px solid #cccccc;

}

br.clear {

clear: both;

}

あとがき

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

画像を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:

hiro

Tags: rails reactjs

Linux Mint（Ubuntu）でイマドキの開発しよう！ 2017年夏版
2017年7月29日
フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。思うんだけど、Macを開発に使うのはわかるんだけど、なぜWindows使う人がいるんだろ？どうせリリースするのLinuxベースのOSなんだし、フロントはiPhoneのSafariか AndroidのChrome、まぁあとはWindowsのChrome,Firefox,IE,Edge Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。これだけマシンのスペックがどんどん上がっているにもかかわらず、嫌がらせのように動きがトロい。コンソールでコマンドライン叩くのがほ…
dockerを使って RailsとReact(node)の開発環境を構築する
2017年4月29日
はじめに dockerを使って、Rails（サーバーサイド）の環境を１つ、React(node)（クライアントサイド）の環境を１つ作る。両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。 docker 自体触るのが初めてだったので、基本的なことから記載しておきます。加えて初心者なので、間違えがあったらごめんなさい。 docker自体のインストールはあちこちに記載されているので、そちらを参照ください。 docker イメージのダウンロードまず、ubuntuのイメージを検索します。スター(STARS)が多い、イメージをダウンロード（PULL)すればOKで…
Webpackを使って、Sassをコンパイルする方法 2017年4月版
2017年4月28日
はじめに Webpackを使って、Sassをコンパイルする方法です。 Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、実際に動いた例を示しておきます。末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。コンパイル環境構築

Shell

$ mkdir test-saas $ cd test-saas $ npm init -y $ npm install webpack extract-text-webpack-plugin css-loader sass-loader style-loader node-sass --save-dev

1
2
3
4

$ mkdir test-saas
$ cd test-saas
$ npm init -y
$ npm install webpack extract-text-webpack-plugin css-loader sass-loader style-loader node-sass --save-dev

こんな感じのフォルダツリーにsassがあると仮定します。 webpack.configの調整ルートフォルダに webpack.config.jsを以下のような内容で作成します。目標は sas…
React Native デバイスの縦向き(PORTRAIT)、横向き(LANDSCAPE)の変化を捉える（イベント）
2017年4月26日
はじめに React Nativeを初めて１０日ほどが立ちました。画面デザインが難しいですね。 flex layoutを使うと、それなりの画面は出来ますが・・・ヘッダー(Navigation)とフッター(Menu or Tab)のサイズが曖昧になり、時には隠れてしまうケースもあります。で、どうすりゃいいんだと考えて、今、思いついたのは、 flex layoutを諦めて、固定ピッチで画面デザインをしてやること。固定ピッチと言っても、デバイスの画面サイズを判定して、ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さというのを計算で求めてやるのが、一番スマートかなとい…
ReactでSPAを作り、Twitter認証(OAuth)でログインする。バックエンドはRails
2017年4月21日
はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。バックエンドはRailsだが、あくまでAPIサーバー的な立場なのでメジャーなomniauth なんかは使えそうにない。。。前回のGoogle編に続き、今回はTwitter編。あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、実装のエキス部分だけを記載してみます。 Twitter Developerにア…
ReactでSPAを作り、Google認証(OAuth)でログインする。バックエンドはRails
2017年4月20日
はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。バックエンドはRailsだが、あくまでAPIサーバー的な立場なのでメジャーなomniauth なんかは使えそうにない。。。あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、実装のエキス部分だけを記載してみます。 Google Developer Consoleにアプリ登録 Google Develope…
React-Router(react-router-dom)とReduxとRailsを組み合わせる
2017年4月14日
はじめに React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。 SPAというと、当然ですが、１つのページであれこれできちゃうものを作らなきゃいけないわけで・・・そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったのであれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。 React-Routerは古いようで、React-Router-Domにしてみました。。ドキュメントが超少なく…
React、Redux入門公式サイトとはちょっと違う角度から
2017年4月13日
はじめにここ3週間ほど死ぬほどReactとReduxやって、あれこれ分かるようになったので、これからReact+Reduxで開発を始めたい人向けに記事を書いてみます。公式サイトの英語記事や、それを翻訳してくれているようなサイトを見てもそれなりに分かるのですが・・・なんだかんだ言って難しい。 Reactの理解はなんとか出来ても、Reduxが特に難しい。欲張りなんですが、とにかく両方をサーッと理解して、さっさとアプリ組みたいよという方の助けになれればと・・・考えていく手順画面イメージ画面を構築するためのコンポーネント階層図ステートイベント基本的にこの４つを考えればOKです。既…

< >