【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

<% 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

<% if current_user.persisted? && current_user.avatar? %>

<%= image_tag current_user.avatar.to_s, class: 'avatar_present_img' %>

<label><%= f.check_box :remove_avatar %> 画像を削除</label>

<% else %>

<%= image_tag 'no_avatar.png', class: 'avatar_present_img' %>

<%= f.hidden_field :avatar_cache %>

<% end %>

<%= f.file_field :avatar, id: 'post_img' %>

</div>

jQuery

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

$( 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);

});

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

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

元のフォーム

フォームを修正する

jQuery

投稿者:

Shuji