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

今回すること

画像アップロード用の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)