Edited at

Carrierwaveで画像を複数アップロードする

More than 1 year has passed since last update.


今回すること

画像アップロード用のgemであるcarrierwaveを使い、あるモデル(今回はprotorypeモデル)にネストさせた形で画像(thumbnail)を複数アップロードします。


使用するファイル


  • gemfile

  • thumbnail_uploader.rb

  • prototypes_controller.rb

  • prototype.rb

  • thumbnail.rb

  • prototype/new.html.haml


やり方


1 まずcarrierwaveをインストールします

gem 'carrierwave'`

bundle install


2 アップローダーを作成します

rails g uploader thumbnail

=> thumbnail_uploaderが作成される。


3 アソシエーションを定義する

rails g migration AddPrototypeRefToThumbnail prototype: references

=> rake db:migrate


prototype.rb

        has_many: thumbnails



thumbnail.rb

        belongs_to: prototype



4 アップローダーを指定


thumbnail.rb

    mount_uploader :image, ThumbnailUploader


※ここのimageはthumbnailsテーブルのカラム名です。


5 accepts_nested_attributes_forによる入れ子フォームの作成


prototype.rb

accepts_nested_attributes_for :thumbnails


これによってプロトタイプにネストされたサムネイルを投稿できるようになります。


6 コントローラーの編集


prototypes_controller.rb

def new

@prototype = Prototype.new(create_params)
3.times { @prototype.thumbnails.build }
end


@prototype.thumbnails.build


これによってプロトタイプに紐付いているサムネイルをビルドします。これによって入れ子のモデル(thumbnail)を表示させる fields_for が表示できます。今回は画像を3枚投稿するので、


3.times


としています。


prototypes_controller.rb

private

def create_params
params.require(:prototype).permit(thumbnails_attributes: [:image])

サムネイルをフォームから投稿するためにストロングパラメータを指定します。

fields_for[引数に与えた名前]_attributes というname属性でフォームを作成するので、今回は thumbnails_attributesとします。

さらに[:image]でカラムの指定をしています。


7 フォームの作成

 fields_forを使って画像投稿フォームを@prototypeにネストさせます。


prototypes/new.html.haml

=form_for(@prototype) do |f|

= f.fields_for :thumbnails do |thumbnail|
= thumbnail.file_field :image
= f.submit "投稿する"

これで画像を複数投稿できるようになりました!


参考

http://www.workabroad.jp/tech/1118

(carrierwave)

http://ruby-rails.hatenadiary.com/entry/20141208/1418018874

(accepts_nested_attributes_for)