【Rails】ActiveStorage でプロフィール画像（アバター）を登録・更新する

$ rails active_storage:install
$ rails db:migrate

$ rails active_storage:install

class AddActiveStorageTable < ActiveRecord::Migration[7.0]
  def change
    # Use Active Record's configured type for primary and foreign keys
    primary_key_type, foreign_key_type = primary_and_foreign_key_types

    create_table :active_storage_blobs, id: primary_key_type do |t|
      t.string   :key,          null: false
      t.string   :filename,     null: false
      t.string   :content_type
      t.text     :metadata
      t.string   :service_name, null: false
      t.bigint   :byte_size,    null: false
      t.string   :checksum

      if connection.supports_datetime_with_precision?
        t.datetime :created_at, precision: 6, null: false
      else
        t.datetime :created_at, null: false
      end

      t.index [ :key ], unique: true
    end
    
    # user_id をランダムな文字列(string)にしている場合は, :record カラムのタイプをstringにしておく
    create_table :active_storage_attachments, id: primary_key_type do |t|
      t.string     :name,     null: false
      #---------------------- type: :string を追記 -------------------------------#
      t.references :record,   null: false, polymorphic: true, index: false, 
                                           type: foreign_key_type, type: :string
      #--------------------------------------------------------------------------#
      t.references :blob,     null: false, type: foreign_key_type

      if connection.supports_datetime_with_precision?
        t.datetime :created_at, precision: 6, null: false
      else
        t.datetime :created_at, null: false
      end

      t.index [ :record_type, :record_id, :name, :blob_id ], name: :index_active_storage_attachments_uniqueness, unique: true
      t.foreign_key :active_storage_blobs, column: :blob_id
    end

    create_table :active_storage_variant_records, id: primary_key_type do |t|
      t.belongs_to :blob, null: false, index: false, type: foreign_key_type
      t.string :variation_digest, null: false

      t.index [ :blob_id, :variation_digest ], name: :index_active_storage_variant_records_uniqueness, unique: true
      t.foreign_key :active_storage_blobs, column: :blob_id
    end
  end

  private
    def primary_and_foreign_key_types
      config = Rails.configuration.generators
      setting = config.options[config.orm][:primary_key_type]
      primary_key_type = setting || :primary_key
      foreign_key_type = setting || :bigint
      [primary_key_type, foreign_key_type]
    end
end

$ rails db:migrate

gem "active_storage_validations"

$ bundle install

class User < ApplicationRecord
  has_one_attached :avatar
  ・・・
  validates :avatar, content_type: { in: %w[image/jpeg image/gif image/png],
                    message: "有効なフォーマットではありません" },
                    size: { less_than: 5.megabytes, message: " 5MBを超える画像はアップロードできません" }
  ・・・
end

class UsersController < ApplicationController
　・・・
  def create
    @user = User.new(user_params)
    #----------------- 追記 -------------------
    @user.avatar.attach(params[:user][:avatar])
    #-----------------------------------------
    if @user.save
      @user.send_activation_email
      flash[:notice] = "アカウント認証メールを送信しました。メールが届きましたら、24時間以内に本文記載の有効化リンクをクリックしてアカウントを認証してください。"
      redirect_to root_url
    else
      render "new", status: :unprocessable_entity
    end
  end

  def update
    #----------------- 追記 -------------------
    @user.avatar.attach(params[:user][:avatar]) if @user.avatar.blank?
    #-----------------------------------------
    if @user.update(user_params)
      flash[:notice] = "プロフィールが変更されました"
      redirect_to @user
    else
      render "edit", status: :unprocessable_entity
    end
  end
　・・・
  private
    def user_params
      #-------------------------------- ↓↓ :avatar を追記 -------------------------------------------------------
      params.require(:user).permit(:name, :gender, :avatar, :email, :content, :password, :password_confirmation)
    end
　　・・・
end

$ brew install imagemagick

# M1 MacでRosetta2ターミナル使用の場合
$ arch -x86_64 brew install imagemagick

Error: Cannot install in Homebrew on ARM processor in Intel default prefix (/usr/local)!
Please create a new installation in /opt/homebrew using one of the
"Alternative Installs" from:
  https://docs.brew.sh/Installation
You can migrate your previously installed formula list with:
  brew bundle dump

$ convert --version
Version: ImageMagick 7.1.0-44 Q16-HDRI x86_64 20294 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP(5.0) 
Delegates (built-in): bzlib fontconfig freetype gslib heic jng jp2 jpeg lcms lqr ltdl lzma openexr png ps raw tiff webp xml zlib
Compiler: gcc (4.2)        

gem 'mini_magick'

$ bundle install

・・・
module HomestayMatching
  class Application < Rails::Application
  ・・・
　config.active_storage.variant_processor = :mini_magick
  end
end

・・・

<!----- プロフィール画像 ------>
<div class="mt-3 mb-5 <%= @user.errors.include?(:avatar) ? "validation_errors" : "" %>">
  <!------ 画像の添付 ------>
  <%= f.label :avatar, '画像(5MBまで)', class: "form-label fw-bold" %><br>
  <%= f.file_field :avatar, onchange: "avatarImage(this);", accept: "image/jpeg,image/gif,image/png", class: "mb-3" %>
  <%= render 'layouts/error_messages',class: "invalid-feedback", obj: @user, key: :avatar %>
  <!------ 添付画像のプレビューを表示 ------>
  <div id="avatar" >
    <img id="avatar_preview" class="mb-3" width="100">
  </div>
  <!------ 現在DBに登録(保存)されている画像を表示 ------>
  <% if @user.avatar.present? %> <!-- @user.avatarが存在する場合のみ image_tag を使用(if文ないとエラーが出る) -->
    <span><b>[現在登録されている画像]</b></span>
    <%= image_tag @user.avatar, width: 200, class: "mb-2" %>
  <% end %>
</div>

・・・

<!------ プレビュー表示用の JavaScript ------->
<script>
  function avatarImage(obj){
      var fileReader = new FileReader();
      fileReader.onload = (function() {
        document.getElementById('avatar_preview').src = fileReader.result;
      });
      fileReader.readAsDataURL(obj.files[0]);
  }
</script>

<%= f.file_field :avatar, onchange: "avatarImage(this);", accept: "image/jpeg,image/gif,image/png", class: "mb-3" %>

<%= image_tag @user.avatar, width: 200, class: "mb-2" %>

<%= image_tag @user.avatar.variant(resize: "200x200^", gravity: "center", crop: "200x200+0+0"), class: "...", alt: "..." %>

・・・

<!----- プロフィール画像 ------>
<div class="mt-3 mb-5 <%= @user.errors.include?(:avatar) ? "validation_errors" : "" %>">

  ・・・

  <!------ 現在登録されている画像を表示(チェックしたものを削除する) ------>
  <% if @user.avatar.present? %>
    <span><b>[現在登録されている画像]</b></span>
    <p class="text-danger font09">※削除する場合は画像にチェックしてから更新してください</p><br>
    <div class="form-check">
      <%= f.check_box :avatar_id, {class: "form-check-input", id: "avatar-image-check"}, @user.avatar.id, false %>
      <label class="form-check-label" for="avatar-image-check">
        <%= image_tag @user.avatar, width: 200, class: "mb-2" %>
      </label>
    </div>
  <% end %>
</div>

・・・

<%= f.check_box :avatar_id, {class: "form-check-input", id: "avatar-image-check"}, @user.avatar.id, false %>

class UsersController < ApplicationController
　・・・

  def update
    @user.avatar.attach(params[:user][:avatar]) if @user.avatar.blank?
    #----------------- 追記 -------------------
    if params[:user][:avatar_id]
      @user.avatar.purge
    end
    #-----------------------------------------
    if @user.update(user_params)
      flash[:notice] = "プロフィールが変更されました"
      redirect_to @user
    else
      render "edit", status: :unprocessable_entity
    end
  end

　・・・
end