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

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

関連記事

processingで重複しないランダムな数を配列で取得する

概要 みなさんこんにちはcandleです。今回はprocessingで重複しないランダムな数を配列で取得する関数を作成したいとおもいます。 前提 なし

railsのrakeで作成したmigrationファイルとstatus履歴を削除する

概要 みなさんこんにちはcandleです。今回はrakeコマンドで作成したマイグレーションファイルの管理を紹介します。rakeコマンドを使っていると、よくよく考えれば必要の無いファイルがある。とか重複 …

ruby on rails4でtwitter bootstrap 3のgemを使用してscaffoldを作成する

概要 みなさんこんにちはcandleです。今回はrails4上でtwitterbootstrap3のgemを使ってscaffoldしてみたいと思います。 scaffoldとはご存知のようにいわゆるwe …

【TwitterBootstrap2.3.2】cssによるレスポンシブwebデザインのメディアサイズの範囲分け

概要 みなさんこんにちはcandleです。今回は当たり前の内容ですが、twitterbootstrap2.3.2(以下bootstrap)のmediaサイズがどの様に分けられているのか見てみましょう。 …

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

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

  • English
  • 日本語

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