Rails6で画像のプレビュー機能を実装する方法

はじめに

今回ご紹介するRails6で画像のプレビュー機能の実装は、私自身がオリジナルアプリを開発する際に、情報がほとんどなく(Rails5の情報はありましたが。）かなり苦労して実装したものになります。
なので、今後実装される方、もしくは今実装できずに苦労されている方の参考になれば幸いです。

バージョン

Rails６
(rails5の場合は他の記事をご参考ください。）

前提条件

Carrierwaveを使い、画像のアップロード機能は実装できているものとする。
実装できていない場合は私が以前に書いた記事
RailsでCarrierWaveとRMagickを使い、円形のプロフィール画像を実装する方法
をご覧下さい。

手順１・viewファイルの実装

今回は新規投稿ページを想定し、views/posts/new.html.erbにコードを書いていきます。

new.html.erb

<%= javascript_pack_tag 'posts' %>

　#中略

<div class="form-group">
  <%= f.label :image, class: "label" %>
  <%= f.file_field :image, accept: 'image/jpeg, image/gif, image/png', id: "image-select-btn" %>
</div>
<div class="post-image-prev">
  <% if @post.image? %>
    <%= image_tag @post.image.thumb.url, alt: "post-image", id: "img_prev", size: "150" %>
  <% else %>
    <%= image_tag "post-default.png", alt: "post-image", id: :img_prev, size: "150" %>
  <% end %>
</div>

一行目の<%= javascript_pack_tag 'posts' %>で次に書くjsファイルを読み込みます。

post-default.pngはこのような画像です。

assets/imagesの中に入れておいてください。

imageタグのsizeの部分はご自身のデザインに応じてご変更下さい。

手順２・jsファイルの実装

javascript/packs/posts.jsにコードを書いていきます。

posts.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]);
    }
  }
  $("#image-select-btn").change(function () {
    readURL(this);
  });
});

以上です。

これで画像をアップロードをした際にプレビュー画像がデフォルトから切り替わります。

アップロードしたファイルを投稿前に確認できるので、とても便利な機能です。