joppot

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

プログラミング

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

投稿日:

Pocket

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

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

関連記事

phpとmysqlでアカウント管理する時のテストユーザーのパスワードの暗号化はmysqlのsha1でもできる

by brewbooks 概要 みなさんこんにちはcandleです。最近はphpでサービスを書いたりしています。その中でテストユーザーのアカウント管理でパスワードを暗号化してデータベースに収めています …

memcachedサーバとruby on railsのdalliを使用してセッションを管理する

概要 みなさんこんにちはcandleです。今回はmemcachedサーバを利用してrailsのセッションを管理してみたいと思います。 一般にrailsでセッション管理をしていると、ブラウザのcooki …

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

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

fabricのsshのネットワーク設定でパスワードか公開鍵を使って認証する

概要 皆さん今日はcandleです。今回はsshを使ったfabricの設定をしましょう。 一般にsshにはパスワード認証と公開鍵認証があるので、そのどちらも試してみましょう。 もちろんセキュリティ面で …

CakePHPでhelloworld

概要 CakePHPでプログラミングのお約束helloworldを行いましょう。 helloworldとは動作確認も含めた、一番最初に書くプログラムコードです。 だいたいはhello worldと単純 …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ