【Rails5】アップロードした画像を即時プレビューする

rails upload preview jquery

Deviseのregistrations#editで画像をアップロードするの続きです。前回、carrierwaveを使ってUserのavatar画像をアップロードしました。今回はこのアップロードの際に、すぐにプレビューできるようにjQueryを追加しました。rails5ではturbolinksの挙動が変わったので$(document).on ‘turbolinks:load’としないとイベントが発火しないので注意が必要です。

元のフォーム

前回からのフォームです。current_userはサインインしているユーザーを取得するdeviseのヘルパーメソッドです。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。既存の画像がない場合はno_avatar.pngという画像をあてています。

app/views/devise/registrations/edit.html.erb

フォームを修正する

次に必要な記述を追加していきます。avatar_img_prevでプレビューを表示します。通常はhiddenです。avatar_present_imgは現在の画像です。post_imgがイベントが発火のフックになります。

app/views/devise/registrations/edit.html.erb

jQuery

Rails5ではここでTurbolinksをロードしてからのイベントです。ファイル選択をフックに、#avatar_img_prevのhiddenと.avatar_present_imgを取り除いてデータ取得を実行しています。
読み込みが完了したらFileReader.onloadイベントが発火して、readAsDataURLでファイルを読み込んでいます。

以上です!ご覧いただきありがとうございました!!☺️もっと良い方法があれば教えていただけると幸いです!


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp