railsで1対多の動的フォーム fleximageで画像アップロード [rails]
前回までの1対多の動的フォームに画像アップロードを組み込む。
fleximageというプラグインを利用するが、以下の解説がわかりやすい。
Railsで画像アップロード - ククログ(2009-03-23)プラグインの本家はこちら。Home - fleximage - GitHub 今回のソースはこちら。http://www.youter.jp/peridot24/two_models_in_one_form_with_fleximage.zip 作成手順 前回のソースに対しての手順を記す。 1.Rmagickのインストール 2.fleximageプラグインのインストール 3.fleximageプラグインを用いる旨、モデルに記述
diff --git a/app/models/image.rb b/app/models/image.rb index faa3353..cffe950 100644 --- a/app/models/image.rb +++ b/app/models/image.rb @@ -1,3 +1,8 @@ class Image < ActiveRecord::Base belongs_to :product + acts_as_fleximage do + image_directory 'public/images/uploaded' + image_storage_format :png + require_image true + end end4.accepts_nested_attibutes_forの記述を修正
diff --git a/app/models/product.rb b/app/models/product.rb index 913ddf1..270adc1 100644 --- a/app/models/product.rb +++ b/app/models/product.rb @@ -1,5 +1,6 @@ class Product < ActiveRecord::Base has_many :images, :dependent => :destroy accepts_nested_attributes_for :images, - :allow_destroy => true + :allow_destroy => true, + :reject_if => proc { |a| a['image_file'].blank? } end5.imagesコントローラ作成・修正 > ruby script/generate controller images show アクションshowの記述ととプライベートメソッドfind_productの追加、before_filterの指定。
class ImagesController < ApplicationController before_filter :find_product def show @image = @product.images.find(params[:id]) respond_to do |format| format.png # show.png.flexi format.html # show.html.erb format.xml { render :xml => @image } end end def find_product @product_id = params[:product_id] return(redirect_to(product_url)) unless @product_id @product = Product.find(@product_id) end private :find_product end6.ビューの修正・追加 修正 app/views/products/_form.html.erb app/views/products/_image.html.erb app/views/products/show.html.erb 追加 app/views/images/show.png.flexi これで出来ました。 ○今日のお買い物 子供との旅行用に乾電池式充電器を買った。ドラクエⅨまであと一月切ったし。
DS Lite用乾電池式外部充電器『チャージアダプタLite(ホワイト)』
- 出版社/メーカー: リンクスプロダクツ
- メディア: Video Game
1対多を一括処理するフォームのソース [rails]
前回のソース。
http://www.youter.jp/peridot24/two_models_in_one_form20091615.zip
次回は、fleximageプラグインを利用して、画像のアップロードも組み込んでみたい。
下記は、今回までの作成手順の覚え書き。
作成手順
1.プロジェクトを新規作成し、2つのモデルを追加。db:migrate。
$ rails two_models_in_one_form
$ cd two_models_in_one_form
$ ruby script/generate scaffold product name:string
$ ruby script/generate model image product_id:integer caption:string
$ rake db:migrate
2.1対多のリレーションを設定。また、accepts_nested_attributes_forも設定。
3.config/routes.rbの編集
4.javascriptソースをコピペ
public/javascripts/application.js
public/javascripts/delegate.js
5.ヘルパをコピペ
app/helper/layout_helper.rb
app/helper/products_helper.rb
6.コントローラの修正
app/controllers/products_controller.rb
アクションnewに、次の一行を追加。
def new
@product = Product.new
+ @product.images.build
respond_to do |format|
format.html # new.html.erb
8.ビューの作成・修正
app/views/products/show.html.erb
app/views/products/new.html.erb
app/views/products/edit.html.erb
app/views/products/_form.html.erb
app/views/products/_image.html.erb
こんな感じだったかな。
http://www.youter.jp/peridot24/two_models_in_one_form20091615.zip
次回は、fleximageプラグインを利用して、画像のアップロードも組み込んでみたい。
下記は、今回までの作成手順の覚え書き。
作成手順
1.プロジェクトを新規作成し、2つのモデルを追加。db:migrate。
$ rails two_models_in_one_form
$ cd two_models_in_one_form
$ ruby script/generate scaffold product name:string
$ ruby script/generate model image product_id:integer caption:string
$ rake db:migrate
2.1対多のリレーションを設定。また、accepts_nested_attributes_forも設定。
diff --git a/app/models/image.rb b/app/models/image.rb index 1b6d3d7..faa3353 100644 --- a/app/models/image.rb +++ b/app/models/image.rb @@ -1,2 +1,3 @@ class Image < ActiveRecord::Base + belongs_to :product end diff --git a/app/models/product.rb b/app/models/product.rb index 077a819..037d0b7 100644 --- a/app/models/product.rb +++ b/app/models/product.rb @@ -1,2 +1,3 @@ class Product < ActiveRecord::Base + has_many :images, :dependent => :destroy + accepts_nested_attributes_for :images, + :allow_destroy => true end
3.config/routes.rbの編集
diff --git a/config/routes.rb b/config/routes.rb index 61ff96b..ead1038 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,5 +1,7 @@ ActionController::Routing::Routes.draw do |map| - map.resources :products + map.resources :products do |product| + product.resources :images + end # The priority is based upon order of creation: first created -> highest priority.
4.javascriptソースをコピペ
public/javascripts/application.js
public/javascripts/delegate.js
5.ヘルパをコピペ
app/helper/layout_helper.rb
app/helper/products_helper.rb
6.コントローラの修正
app/controllers/products_controller.rb
アクションnewに、次の一行を追加。
def new
@product = Product.new
+ @product.images.build
respond_to do |format|
format.html # new.html.erb
8.ビューの作成・修正
app/views/products/show.html.erb
app/views/products/new.html.erb
app/views/products/edit.html.erb
app/views/products/_form.html.erb
app/views/products/_image.html.erb
こんな感じだったかな。
タグ:Rails
railsで1対多の動的フォーム [rails]
rails2.3.2で導入されたaccepts_nested_attributes_forを使うと、1対多の2つのモデルを一つのフォームで簡単に登録・更新・削除ができる。
これを使って、関連する任意数の画像ファイルを登録するフォームを作ってみる。まずは、画像アップロード以外の部分からやってみる。
すばらしいサンプルがあった。
これを実行すると、こんな感じ。子要素が動的に追加されたり削除されたり、なかなかの感動もの。
でも、更新画面で一度removeしてしまうと、画面上に復活できないのが難点。一度表示に戻ってもう一度Editやり直ししなければいけない。
で、ちょっと修正してみた。
修正点は、ラジオボックスで削除を選択した場合、動的に削除確認のチェックボックスを出すようにしたこと。実際の削除はsubmitがされるまで行われないので、思い直すことが可能。
新しい子要素の追加もばっちり。
ソースは次回。
これを使って、関連する任意数の画像ファイルを登録するフォームを作ってみる。まずは、画像アップロード以外の部分からやってみる。
すばらしいサンプルがあった。
alloy's complex-form-examples at master - GitHub
これを実行すると、こんな感じ。子要素が動的に追加されたり削除されたり、なかなかの感動もの。
でも、更新画面で一度removeしてしまうと、画面上に復活できないのが難点。一度表示に戻ってもう一度Editやり直ししなければいけない。
で、ちょっと修正してみた。
修正点は、ラジオボックスで削除を選択した場合、動的に削除確認のチェックボックスを出すようにしたこと。実際の削除はsubmitがされるまで行われないので、思い直すことが可能。
新しい子要素の追加もばっちり。
ソースは次回。
タグ:Rails