【Rails】ActiveStroageの使い方を実例で解説｜複数画像やファイルのアップロードと個別に削除・変更する方法

rails active_storage:install
rails db:migrate

# rails active_storage:install
Copied migration 20210811020333_create_active_storage_tables.active_storage.rb from active_storage

# This migration comes from active_storage (originally 20170806125915)
class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
  def change
    create_table :active_storage_blobs 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,     null: false
      t.datetime :created_at,   null: false

      t.index [ :key ], unique: true
    end

    create_table :active_storage_attachments do |t|
      t.string     :name,     null: false
      t.references :record,   null: false, polymorphic: true, index: false
      t.references :blob,     null: false

      t.datetime :created_at, null: false

      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 do |t|
      t.belongs_to :blob, null: false, index: false
      t.string :variation_digest, null: false

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

# rails db:migrate
== 20210811020333 CreateActiveStorageTables: migrating ========================
-- create_table(:active_storage_blobs, {})
   -> 0.1982s
-- create_table(:active_storage_attachments, {})
   -> 0.0799s
-- create_table(:active_storage_variant_records, {})
   -> 0.0805s
== 20210811020333 CreateActiveStorageTables: migrated (0.3589s) ===============

rails g scaffold user name:string, age:integer
rails db:migrate

class User < ApplicationRecord
    has_one_attached :image
end

  private
    (省略)

    def user_params
      params.require(:user).permit(:name, :age, :image)
    end
end

<%= form.file_field :カラム名 %>

<%= form_with(model: user) do |form| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
        <% user.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div class="field">
    <%= form.label :age %>
    <%= form.number_field :age %>
  </div>

  <%# 追記 %>
  <div class="field">
    <%= form.label :image %>
    <%= form.file_field :image %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

 <%= image_tag モデルのインスタンス.画像カラム名 %>

<% if @user.image.attached? %>
  <p>
    <strong>Image:</strong>
    <%= image_tag @user.image %>
  </p>
<% end %>

<p id="notice"><%= notice %></p>

<p>
  <strong>Name:</strong>
  <%= @user.name %>
</p>

<p>
  <strong>Age:</strong>
  <%= @user.age %>
</p>

<% if @user.image.attached? %>
<div>
  <p><strong>Image:</strong></p>
  <%= image_tag image, size: '400x300' %>
</div>
<% end %>

<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>

<td><%= user.image.attached? ? 1 : 0 %></td>

<p id="notice"><%= notice %></p>

<h1>Users</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Images</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.age %></td>
        <td><%= user.image.attached? ? 1 : 0 %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

<%= image_tag @user.image %>

<img src="http://localhost:3001/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--59e9ed677277e36ba37be3f09da4a251a8db8d66/hills.jpg">

class User < ApplicationRecord
    has_many_attached :images
end

  private

    def user_params
      params.require(:user).permit(:name, :age, images: [])
    end

  <div class="field">
    <%= form.label :images %>
    <%= form.file_field :images, multiple: true %>
  </div>

<% if @user.images.attached? %>
<div style="width: 700px;">
  <p><strong>Image:</strong></p>
  <% @user.images.each do |image| %>
    <%= image_tag image, width: 300, height: 200 %>
  <% end %>
</div>
<% end %>

<%= user.images.attached? ? user.images.count : 0 %>

  <% if user.images.attached? %>
    <p>選択済みの画像（削除する画像にチェックをつけてください）</p>
    <div style="display: flex; flex-wrap: wrap; width: 750px;">
    <% @user.images.each do |image| %>
      <div style="display: flex; margin:5px 5px 5px 0;">
        <%= form.check_box :image_ids, { multiple: true }, image.id, false %>
        <label for="user_image_ids_<%= image.id %>" > 
          <%= image_tag image, size: '300x200' %>
        </label>
      </div>
    <% end %>
    </div>
  <% end %>

f.check_box(メソッド名 [, オプション, checked_value = "1", unchecked_value = "0"])

<%= form.check_box :image_ids, { multiple: true }, image.id, false %>

 <%= image_tag image, size: '300x200' %>

<label for="user_image_ids_<%= image.id %>" >

  def update

    #添付画像を個別に削除
    if params[:user][:image_ids]
      params[:user][:image_ids].each do |image_id|
        image = @user.images.find(image_id)
        image.purge
      end
    end

    respond_to do |format|
      if @user.update(user_params)
        format.html { redirect_to @user, notice: "User was successfully updated." }
        format.json { render :show, status: :ok, location: @user }
      else
        format.html { render :edit, status: :unprocessable_entity }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end

#<ActionController::Parameters {"name"=>"test1", "age"=>"24", "image_ids"=>["85", "86", "91", "92"]} permitted: false>

if params[:user][:image_ids]

モデルインスタンス名.blob名.purge

モデルインスタンス名.blob名.find(id番号).purge

module RailsVue
  class Application < Rails::Application
    (省略)
    #ActiveStorage上書きしない
    config.active_storage.replace_on_assign_to_many = false
  end
end

url_for(モデルインスタンス名.blobファイルの名称)

<% if @user.images.attached? %>
<div style="width: 700px;">
  <p><strong>Image:</strong></p>
  <% @user.images.each do |image| %>
    <a href="<%= url_for(image) %>">
      <%= image_tag image, size: '300x200' %>
    </a> 
  <% end %>
</div>
<% end %>

<% if @user.images.attached? %>
<div style="width: 700px;">
  <p><strong>Image:</strong></p>
  <% @user.images.each do |image| %>
  　<%= link_to image_tag(image, size: '300x200'), url_for(image) %>
  <% end %>
</div>
<% end %>

  resources :users do
    get :download, on: :member
  end

  resources :users do
    member do
      get :download
    end
  end

root@e1c25463cf4f:/rails-test# rails routes
Prefix         Verb   URI Pattern                    Controller#Action                                                                                   Controller#Action
download_users  GET    /users/:id/download(.:format)   users#download

  before_action :set_user, only: %i[ show edit update destroy download]

  (省略)

  def download
    image = @user.images.find(params[:image_id])
    file = image.download
    send_data(file, filename: "picture#{params[:image_id]}.jpg")
  end

send_data(送るデータ [, オプション])

send_data(file, filename: "picture#{params[:image_id]}.jpg")

<% if @user.images.attached? %>
<div style="width: 700px;">
  <p><strong>Image:</strong></p>
  <% @user.images.each do |image| %>
      <%= link_to image_tag(image, size: '300x200'), download_user_path(@user, image_id: image.id) %>
  <% end %>
</div>
<% end %>

# Use Active Storage variant
gem 'image_processing', '~> 1.2'

# bundle install

Fetching gem metadata from https://rubygems.org/............
(省略)
Fetching ruby-vips 2.1.2
Installing ruby-vips 2.1.2
Fetching image_processing 1.12.1
Installing image_processing 1.12.1

blobオブジェクト.variant(resize: "横幅x縦幅")

<%= image_tag image, size: '300x200' %>

<%= image_tag image.variant(resize: "300x200") %>

<%= image_tag image.variant(resize: '300x200', rotate:30, type: :grayscale) %>