概要
みなさんこんにちは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
ビューを変更する
「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| %>
フォームのtopimageの項目もfile_fieldに変更します。
<%= f.file_field :topimage, :class => ‘form-control’ %>
コントローラーを変更する
モデル、ビューが完成したので次に、コントローラーを作ります。
変更する場所は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
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
変更している点は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」でフォームを送信します。
インスペクタを見てみると、送信してデータがjsonで返ってきています。
うまくいきましたね。
まとめ
あとはjsonをもとに表示したり、動的に画像を差し替えたりできますね。
