cocoonを利用して複数枚の画像のアップロードを行う
はじめに
画像をアップロードするとき、途中に画面遷移を挟まないで、複数枚の画像を次々とアップロードしたい、という要望は比較的多いと思います。つまり、1対nの関係にあるモデルの一括した作成や更新です。また、作業に際してはプレビュー表示も必要だよね、なんて意見は当然のように挙げられます。
実装
なにはともあれ、cocoonをインストールします。
gem install cocoon
application.jsで必要なファイルをrequireします。
//= require cocoon
accepts_nested_attributes_forで、親モデルから子モデルを操作する為の指定を行います。こちらはcocoonには関係のないActiveRecordの機能となります。
Pictureクラスにはpaperclipでもcarrierwaveでも、お好きな画像関係のgemを追加、設定して下さい。これといって特定のgemに依存することはございません。今回の記事では記述量が増えて面倒なので、省かせて頂いております。
次にview側を作成します。フォームはsimpole_formを利用して作成しておりますが、これもまた必須ではございません。記述量を減らすための措置でございます。
上記から呼び出される_picture_fields.html.erbは以下のような感じです。一部でjQueryを利用しています。そう大した内容ではないので、jQueryアレルギーのある方は、他のフレームワークで読み替えて下さい。これもまたry
上記を実行すると、画像のアップロードボタンが画面に表示されます。それをクリックすることで、ファイルの選択ボタン及び、画面にプレビューされた選択画像(アップロード対象画像)を次々と追加していくことができます。
キモはbrowsePicture関数内で、file.filesの値を参照の上、FileReaderを利用して、image_tagで出力されたプレビュー領域のsrcを書き換えて、readAsDataURLで読み込んでいる点です。これにより画面遷移を行わずとも、プレビュー画像を表示できます。
file_fieldタグのstyle: ‘display:none;’については、これに対応するための処置でございます。image_tagを利用したプレビュー表示が存在しているので、file_fieldには裏方に回ってもらっています。
ところで、上記のどこにcocoonが使われているのでしょうか。
答えはlink_to_add_associationです。
addボタンでpartialをニョキニョキと生やす部分が、cocoon由来のメソッドです。