railsで1対多の動的フォーム fleximageで画像アップロード

前回までの１対多の動的フォームに画像アップロードを組み込む。 fleximageというプラグインを利用するが、以下の解説がわかりやすい。

Railsで画像アップロード - ククログ(2009-03-23)

プラグインの本家はこちら。Home - fleximage - GitHub 今回のソースはこちら。http://www.youter.jp/peridot24/two_models_in_one_form_with_fleximage.zip 作成手順 前回のソースに対しての手順を記す。 １．Rmagickのインストール ２．fleximageプラグインのインストール ３．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
 end

４．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? }
 end

５．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
end

６．ビューの修正・追加 修正 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

１対多を一括処理するフォームのソース

前回のソース。

http://www.youter.jp/peridot24/two_models_in_one_form20091615.zip

次回は、fleximageプラグインを利用して、画像のアップロードも組み込んでみたい。
下記は、今回までの作成手順の覚え書き。

作成手順

１．プロジェクトを新規作成し、２つのモデルを追加。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

２．１対多のリレーションを設定。また、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
 

３．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.

４．javascriptソースをコピペ

public/javascripts/application.js
public/javascripts/delegate.js

５．ヘルパをコピペ

app/helper/layout_helper.rb
app/helper/products_helper.rb

６．コントローラの修正

app/controllers/products_controller.rb

アクションnewに、次の一行を追加。
def new
@product = Product.new
+ @product.images.build

respond_to do |format|
format.html # new.html.erb

８．ビューの作成・修正

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対多の動的フォーム

rails2.3.2で導入されたaccepts_nested_attributes_forを使うと、1対多の２つのモデルを一つのフォームで簡単に登録・更新・削除ができる。
これを使って、関連する任意数の画像ファイルを登録するフォームを作ってみる。まずは、画像アップロード以外の部分からやってみる。

すばらしいサンプルがあった。

alloy's complex-form-examples at master - GitHub

これを実行すると、こんな感じ。子要素が動的に追加されたり削除されたり、なかなかの感動もの。

でも、更新画面で一度removeしてしまうと、画面上に復活できないのが難点。一度表示に戻ってもう一度Editやり直ししなければいけない。

で、ちょっと修正してみた。
修正点は、ラジオボックスで削除を選択した場合、動的に削除確認のチェックボックスを出すようにしたこと。実際の削除はsubmitがされるまで行われないので、思い直すことが可能。





新しい子要素の追加もばっちり。



ソースは次回。

タグ：Rails