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

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

関連記事

railsでsvgをviewに表示する

概要 みなさんこんにちはcandleです。 今回はrailsでsvgを出力します。 レスポンシブウェブデザインから始まり、最近ではwebでもsvgの使用が増えてきたような気がします。 手こずらずにsv …

Railsの正規表現を使用して文字列から任意の文字を取得する

概要 みなさんこんにちはcandleです。今回はrailsの正規表現を使って任意の文字を文字列から取得する方法を紹介します。 rails4になってからなのか、railsはrubyであるにもかかわらず、 …

C++のopencvでhelloworld

概要 (追記、2018年11月に書き直しました) みなさんこんにちはcandleです。インストールできたopencvを使ってhelloworldを行いましょう。 opencvでhelloworldとは …

railsのaws-sdk gemを使ってs3のフォルダ(folder)を削除する

概要 みなさんこんにちはcandleです。今回はs3にあるフォルダを丸ごとrailsのaws-sdk gemを使用して削除してみたいと思います。 実はこの方法を確立するまですごく四苦八苦しました。なん …

React WebでURLをaタグのリンクにして表示する

概要 みなさんこんにちはcandleです。今回はReactでコメントなどに投稿されたURLからリンクを生成する方法を紹介します。しかし、URLからリンクの自動生成は結構危険です。無尽蔵にリンク化を許可 …

  • English
  • 日本語

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