[RUBY] [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.

Recommended Posts

[Implementation procedure] Implement image upload function with Active Storage
Image preview function implementation
How to implement image posting function using Active Storage in Ruby on Rails
Implementation of image preview function
Login function implementation with rails
[Rails] Implement image posting function
Post videos with Active Storage
Implement search function with form_with
Let's roughly implement the image preview function with Rails + refile + jQuery.
[Rails] Implementation of image preview function
I tried to implement the image preview function with Rails / jQuery
[Rails] Comment function implementation procedure memo
Try to implement login function with Spring-Boot
Rails Basic CRUD function implementation procedure scaffold
How to implement TextInputLayout with validation function
Implement paging function with Spring Boot + Thymeleaf
Implement image input / output with Spring MVC
Post / delete multiple images with Active Storage
Multiple image upload function using Rails Carrierwave
Image upload
Today's learning summary: With user management function implementation
[Rails] Implementation of image enlargement function using lightbox2
Try to implement login function with Spring Boot
Flow to implement image posting function using ActiveStorage
[JQuery] Implementation procedure of AutoComplete function [Java / Spring]
Implement search function with Rakuten Books (DVD) API