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
|
1 2 3 4 5 6 7 8 9 10 |
<div class="circle-avatar"> <% if current_user.persisted? && current_user.avatar? %> <%= image_tag current_user.avatar.to_s %> <label><%= f.check_box :remove_avatar %> 画像を削除</label> <% else %> <%= image_tag 'no_avatar.png' %> <%= f.hidden_field :avatar_cache %> <% end %> <%= f.file_field :avatar %> </div> |
フォームを修正する
次に必要な記述を追加していきます。avatar_img_prevでプレビューを表示します。通常はhiddenです。avatar_present_imgは現在の画像です。post_imgがイベントが発火のフックになります。
app/views/devise/registrations/edit.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="circle-avatar"> <img id="avatar_img_prev" src="#" class='hidden' /> <!-- 1行追加 --> <% if current_user.persisted? && current_user.avatar? %> <%= image_tag current_user.avatar.to_s, class: 'avatar_present_img' %> <!-- classを追加 --> <label><%= f.check_box :remove_avatar %> 画像を削除</label> <% else %> <%= image_tag 'no_avatar.png', class: 'avatar_present_img' %> <!-- classを追加 --> <%= f.hidden_field :avatar_cache %> <% end %> <%= f.file_field :avatar, id: 'post_img' %> <!-- idを追加 --> </div> |
jQuery
Rails5ではここでTurbolinksをロードしてからのイベントです。ファイル選択をフックに、#avatar_img_prevのhiddenと.avatar_present_imgを取り除いてデータ取得を実行しています。
読み込みが完了したらFileReader.onloadイベントが発火して、readAsDataURLでファイルを読み込んでいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$( document ).on('turbolinks:load', function() { function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#avatar_img_prev').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#post_img").change(function(){ $('#avatar_img_prev').removeClass('hidden'); $('.avatar_present_img').remove(); readURL(this); }); }); |
以上です！ご覧いただきありがとうございました！！☺️もっと良い方法があれば教えていただけると幸いです！
