ホームRailsの覚書Vue.jsの覚書MenuSidebarPrevNextSearchcocoonを利用して複数枚の画像のアップロードを行うはじめに画像をアップロードするとき、途中に画面遷移を挟まないで、複数枚の画像を次々とアップロードしたい、という要望は比較的多いと思います。1対nの関係にあるモデルの一括した作成や更新です。作業に際してはプレビュー表示も必要だよね、なんて意見は当然のように挙げられます。実装なにはともあれ、cocoonをインストールします。cocoonapplication.jsで必要なファイルをrequireします。cocoonaccepts_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で読み込んでいる点です。これにより画面遷移を行わずとも、プレビュー画像を表示できます。‘display:none;’については、これに対応するための処置でございます。image_tagを利用したプレビュー表示が存在しているので、file_fieldには裏方に回ってもらっています。ところで、上記のどこにcocoonが使われているのでしょうか。答えはlink_to_add_associationです。addボタンでpartialをニョキニョキと生やす部分が、cocoon由来のメソッドです。