joppot

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

プログラミング

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

投稿日:

Pocket

file55011d39ab63f

概要

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

前提

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

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

SPONSORED LINK


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

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

関連記事

MAMPのSQLiteManagerを使用してsqlite3データベースの作成とデータベースファイルの設置

概要 みなさんこんにちはcandleです。今回はsqliteデータベースをMAMPを使用して作成しましょう。 PHP5.3からsqlite3のクラスが充実して、mysqlを使用しなくてもsqliteで …

Mac OS 10.9 MarvericksにHomebrewでOpencv2.4.7をインストールする

概要 みなさんこんにちはcandleです。今回はhomebrewを使用してopencvをインストールします。 前回macports経由でインストールする方法がうまくいかない事を記事にしましたが今回の方 …

Mac OS 10.9 Marvericks のMacportsでインストールしたOpencv2.4.8はXcode5、ターミナルでは使えない

概要 みなさんこんにちはcandleです。今回はopencv2.4.8が使えないという事を記事にさせてもらいます。 とは言うものの、2014年2月16日の話であって、今後修正されていくと思うので、その …

wordpressで任意のサブカテゴリー全てをget_categoriesで取得する

概要 みなさんこんにちはcandleです。今回はwordpress開発でよくあるサブカテゴリーを全て取得する方法を紹介します。 カテゴリー一覧をサイドバーに表示したい時があります。この時、get_ca …

C++のopencvでhelloworld

概要 みなさんこんにちはcandleです。インストールできたopencvを使ってhelloworldを行いましょう。 opencvでhelloworldとはなんぞや、と感じるかもしれませんが、open …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ