はじめに

ユーザーの画像変更時に、ファイルは上げたもののはっきり変更されてるのかどうかが分かりづらかったため、jQueryを使ってうまいことプレビュー表示させるようにした（フロント苦手、、、）。

ruby 2.6.3
rails 6.0.3
アップローダー ActiveStorage
jQuary

概要

やりたい挙動

ファイルアップロード前：既にユーザーに紐づいている画像をプレビュー表示
ファイルアップロード後：既にユーザーに紐づいている画像の表示を非表示にして、
　　　　　　　　　　　　新たな画像ファイルをプレビュー表示

実装ファイル一覧

users
①edit.html.slim
②_form.html.slim（form部分だけ切り出して使用。全てeditに書いても問題ありません。）
③javascripts/app/users/edit.js

実装

edit.html.slim

- content_for :title
  = I18n.t 'helpers.title.edit', model: t_model(:user), name: @user.name

== render 'form', model: @user

_form.html.slim

= render 'shared/validation_messages', model: model
= simple_form_for model, html: { class: 'form-horizontal js-editing' } do |f|

  .page-content.container.profile_edit
    .card
      .card-header
        h5.card-title
          | 基本情報
      .card-body.p-3.ibox-content
        .no-padding.no-margins
          .circle-avatar
            img src="#" id="avatar_img_prev" class="d-none"
            - if model.image.attached?
              = image_tag(model.image, class: 'avatar_present_img')
            - else
              = image_tag("defaurt-user.png", class: "avatar_present_img")
          |
          br
          = f.file_field :image, id: "post_img"

          = f.input :name, placeholder: '山田 花子'
　　　　　　/ 以下略

javascripts/app/users/edit.js

/* global $ */

$(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('d-none');
    $('.avatar_present_img').remove();
    readURL(this);
  });
}());