[Implementation procedure] Implement image upload function with Active Storage

Leave the part that was clogged when creating the application for output.

Work environment

・ Mac ・ Ruby 2.6.5 ・ Rails 5.2.3

What is Active Storage?

Ability to upload files to cloud storage services such as Amazon S3, Google Cloud Storage, and Microsoft Azure Storage, and save files to your local disk. ** The feature is that there is no need to create a column. ** **

Reference source [Rails Guide](https://railsguides.jp/active_storage_overview.html#attach the file to the record) [Rails 5.2] How to use Active Storage

Implementation procedure

1. Installation and migration

Terminal

$ rails active_storage:install
$ rails db:migrate

Entering the above command creates two tables, ʻactive_storage_blobs and ʻactive_storage_attachments.

2. Set the file save destination

This time, we will implement it by saving the file on the local disk.

config/storage.yml

local:
  service: Disk
  root: <%= Rails.root.join('tmp', 'storage') %>

test:
  service: Disk
  root: <%= Rails.root.join('tmp', 'storage') %>

To make ʻActive Storage recognize the service to be used, set Rails.application.config.active_storage.service`. Since the service to be used may differ depending on the environment, it is recommended to make this setting for each environment.

To use the local Disk service mentioned above in the development environment, add the following to config / environments / development.rb.

config/environments/developments.rb

  # Storage
  config.active_storage.service = :local

If you want to upload one image

3. model settings

Suppose you want to upload one image to the site model. → Add has_one_attached to the model. According to the Rails guide

Set up a one-to-one mapping between records and files. You can attach one file to each record.

app/models/site.rb

class Site < ApplicationRecord
  has_one_attached :image
end

4. Controller settings

app/controllers/admin/sites_controller.rb

class Admin::SitesController < ApplicationController
  def update
    @site = Site.find(current_site.id)

    if @site.update(site_params)
      redirect_to edit_admin_site_path
    else
      render :edit
    end
  end

  private

  def site_params
    #Has in the model_one_I will add the image set to attached
    params.require(:site).permit(:name, :image)
  end
end

5. view settings

ruby:app/views/admin/sites/edit.html.slim

 = f.input :image, as: :file

ruby:show.html.slim

 = image_tag @site.image

If you want to upload multiple images

3. model settings

Suppose you want to upload multiple images to the site model. → Add has_many_attached to the model. According to the Rails guide

Set up a one-to-many relationship between records and files. You can attach a large number of attachments to each record.

app/models/site.rb

class Site < ApplicationRecord
  has_many_attached :images
end

4. Controller settings

app/controllers/admin/sites_controller.rb

class Admin::SitesController < ApplicationController
  def update
    @site = Site.find(current_site.id)

    if @site.update(site_params)
      redirect_to edit_admin_site_path
    else
      render :edit
    end
  end

  private

  def site_params
    #Has in the model_one_I will add the images set in attached. Allows arrays to be stored.
    params.require(:site).permit(:name, images: [])
  end
end

5. view settings

ruby:app/views/admin/sites/edit.html.slim

 # multiple:Multiple uploads are possible by adding true.
 = f.input :images, as: :file, input_html: { multiple: true }

ruby:show.html.slim

 - @site.images.each do |image|
   = image_tag image

end

This is the first Qiita post in my life. There may be necessary parts such as additions and corrections. In that case, we would appreciate your guidance.