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アレルギーのある方は、他のフレームワークで読み替えて下さい。これもまたｒｙ

上記を実行すると、画像のアップロードボタンが画面に表示されます。それをクリックすることで、ファイルの選択ボタン及び、画面にプレビューされた選択画像（アップロード対象画像）を次々と追加していくことができます。

キモは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由来のメソッドです。