joppot

コピペで絶対動く。説明を妥協しない

プログラミング

railsのcarrierwaveとremotipartで画像のアップロードを非同期にしjsonを受け取る

投稿日:


file55011d39ab63f

概要

みなさんこんにちはcandleです。今回はremotipartとcarrierwaveを使って画像のアップロードをajax化したいと思います。
railsのフォームはremote設定をするだけでajax化する事が簡単なのですが、
そのフォームにファイルのアップロードを加えるとうまくいかなくなります。具体的にはajax化されなくなります。
それをうまくやってくれるのがremotipartです。これらを組み合わせて画像を非同期でアップロードしてみましょう。

前提

適当なrailsアプリケーションがある
scaffldが何か分かっている

twitterbootstrap gemを使用します。
これはもちろんデザインを整えるだけなので、特別必要なわけではありません。



scaffoldを作成する

それでは画像のアップロードを行うscaffoldを作成します。

rails g scaffold RemotipartPic title:string description:text topimage:string

マイグレーションファイルが作成されるので、それをデータベースに反映させます。

bundle exec rake db:migrate

twitterbootstrap gemが入っているなら、デザインを適応させます。

bundle exec rails g bootstrap:themed RemotipartPics

これでscaffoldが完成しました。

アップローダーを作成

多少、前後しますが、scaffoldで作成したtopimageに相当するアップロードを作成します。
このアップローダーはcarrierwaveによるものです。

rails generate uploader Topimage

アップローダーはapp/uploaders/topimage_uploader.rbという形で作成されます。
このファイルの中には設定などが書かれています。
今回はそのまま使います。

モデルを変更する

TopimageアップローダーをRemotipartPicモデルに反映させます。

mount_uploader :topimage, TopimageUploader

topimagemodel


ビューを変更する

「app/views/remotipart_pics/_form.html.erb」を開きます。
最初のフォームタグの部分を変更します。

<%= form_for @remotipart_pic, :html => { :class => 'form-horizontal rimotipartpic_form', :multipart => true , :remote => true },:format => :json,:authenticity_token => true  do |f| %>

formmultipart

フォームのtopimageの項目もfile_fieldに変更します。

<%= f.file_field :topimage, :class => ‘form-control’ %>

changetofilefiledtopimage


コントローラーを変更する

モデル、ビューが完成したので次に、コントローラーを作ります。
変更する場所はcreateアクションとupdateアクションです。

createアクションのresponseの部分を変更しましょう。

respond_to do |format|
  if @remotipart_pic.save
    format.html { redirect_to @remotipart_pic, notice: 'Remotipart pic was successfully created.' }
    format.json { render josn: @remotipart_pic }
  else
    format.html { render action: 'new' }
    format.json { render json: @remotipart_pic.errors.full_messages, status: :unprocessable_entity }
  end
end

noracrfaete-1

respond_to do |format|
  if @remotipart_pic.update(remotipart_pic_params)
    format.html { redirect_to @remotipart_pic, notice: 'Remotipart pic was successfully updated.' }
    format.json { render json: @remotipart_pic }
  else
    format.html { render action: 'edit' }
    format.json { render json: @remotipart_pic.errors.full_messages, status: :unprocessable_entity }
  end
end

remotipartupdate

変更している点はjsonの箇所のみです。

cofffee scriptを変更する

$(document).on 'ready page:load', ->
  $('form.rimotipartpic_form').bind 'ajax:complete', (e, data, status, error) ->
    console.log data 
    console.log data.responseText

画像を送信してjsonのレスポンスを受け取るには上の様にします。


実際に動かしてみる

それでは実際に動かして、jsonを受け取ってみましょう。

「http://localhost:3000/remotipart_pics/new」を開いて、フォームを送信してみましょう。

タイトルとデスクリプション埋めて、
画像を選択し、「Create Remotipart Pic」でフォームを送信します。

uploadimage

インスペクタを見てみると、送信してデータがjsonで返ってきています。
うまくいきましたね。


まとめ

あとはjsonをもとに表示したり、動的に画像を差し替えたりできますね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

pythonのfabricでファイルを分割しfabfileに読み込む方法

概要 皆さんこんにちはcandleです。今回はfabricで分割したpythonファイルを読み込んでみましょう。 fabricはfabfile.pyというファイルに実行したいコマンドを書くのですが、 …

ReactでFaker.jsを利用してダミーデータを生成する

概要 みなさんこんにちはcandleです。今回はFaker.jsをReactで使ってみようと思います。 Faker.jsの使用目的は様々あると思います。多くの場合はテストで使うと思うのですが、今回は簡 …

ruby on railsのckeditor gemをapacheのproductionの本番環境で動かす

概要 みなさんこんにちはcandleです。今回はckeditorを本番環境で動かしてみたいと思います。 とは言っても基本的な記述はdevelopment環境と同じなので、そこまでは前回の記事を参照お願 …

railsのaws-sdk gemを使ってs3に画像ファイルをフォームからアップロードする

概要 みなさんこんにちはcandleです。比較的難しいrailsからs3に画像をアップロードする方法を試してみましょう。 一般にサーバ環境にはスケーラビリティ(アクセスの規模に応じて、動的にサーバを動 …

Rails pluginを使ったgemの作り方[1](基本設定編)

概要 みなさんこんにちはcandleです。今回からできればシリーズ物として、railsのgemを作っていこうと考えています。なぜかgemの作り方の詳しい解説サイトが日本語で少ないので未だgemを満足に …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー