画像プレビュー機能の作成 [Rails6]

投稿前に画像を確認できるようにプレビュー機能を作りたい

プレビュー機能の作成

元の状態

消した方が見栄えが良くなるのでfile_fieldを非表示に

<%= f.file_field :image, class: "img_field", style: 'display:none;' %>

プレビュー画像をクリックしたらファイルを開けるようにします

<%= image_tag @work.image.url, onClick: "$('.img_field').click()", class: "img_prev" %>

ファイルを変更したらプレビュー画像が切り替わるようにします

// preview.js
$(function() {
  function readURL(input) {
      if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
  $('.img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
      }
  }
  $(document).on('change', '.img_field', function(){
    readURL(this);
  });
});

// applocation.jsに追加
import "../javascripts/preview"

また、新規投稿画面など初期画像が無い状態では不親切なのでnoimage画像を表示させます

<% if @work.image %>
  <%= image_tag @work.image.url, onClick: "$('.img_field').click()", class: "img_prev" %>
<% else %>
  <%= image_pack_tag 'noimage.png' %>
<% end %>

noimage

参考

qiita.com