CarrierWave 複数の画像をコード三行で一つのカラムに保存する

  • 4
    いいね
  • 0
    コメント

RailsのCarrierWaveというgemを使って@article.imagesで複数画像を呼び出せるようにする方法です。
「CarrierWave 複数画像」調べると画像の情報を保持するためのImagesテーブルを作って、has_many :imagesとする方法が出てくる。

しかし、CarrierWaveバージョン1.0.0から複数画像は公式でサポートされていて、上記の方法よりかなり簡潔に実装することが可能になっているのでそれを紹介します。

20170323192211.png

CarrierWaveで一つのオブジェクト(レコード)に複数の画像を保存する

複数の画像をアップロードする方法だけにフォーカスするためにCarrierWave自体のセットアップ方法についてはここでは触れません。
そもそもCarrierWave使っていないよ。という方には「Rails 超お手軽な画像アップローダー CarrierWave の使い方」がわかりやすくておすすめです。

古いバージョンのCarrierWaveを使っている場合はgem 'carrierwave', '~> 1.0.0'でバージョンを1.0.0以上にしておいてください。

実装

追加するコードは三行です。

Articlesテーブルにimagesカラムを作ってそこに複数の画像を保存します。

rails g migration add_images_to_articles images:json
rake db:migrate

アップローダーをimagesカラムにセット

class Article < ActiveRecord::Base
  mount_uploaders :images, ImageUploader
end

画像アップロード用のフォームを作成

<%= form.file_field :images, multiple: true %>

strong parameters にimages追加

params.require(:article).permit(:title, :body, {images: []})

以上です。

うまくいかない、カスタマイズが必要といった人は公式README.mdのMultiple file uploadsの項と画像の追加と削除の仕方に目を通すと幸せになれると思います!

個人的に困っていること

画像の追加と削除の仕方にある方法に従って画像追加機能を実装したのですが、article.imagesに一枚画像を追加するたびにarticle.imagesに紐づくすべてのアップロードしなおしてしまうという問題です。

詳しいコードを書くのは長くなりそうなのでしませんが、同じ問題に悩んでる方がいたらコメントいただけるとうれしいです。

ソーシャル

Google, Web関連を中心にソフトウェアの情報をキャッチアップしてます。
「もっと情報共有したいなあ」と思っているので絡んでくれると嬉しいです。

Twitter: https://twitter.com/awjecc