Continued ・ Flow to implement image posting function using ActiveStorage

Introduction

Explanation from image saving to display using Active Storage. In my last post, I explained how to install Active Storage.

Link ↓ Flow to implement image posting function using ActiveStorage

Flow from saving an image to displaying it

  1. Definition of association
  2. Allow strong parameters to save images
  3. Generated as HTML img element
  4. Error resolution
  5. Image resizing
  6. Validation settings

1. Definition of association

Use the has_one_attached method to associate each record with the image file in a one-to-one relationship. Describe in the model file you want to link

model


class model< ApplicationRecord
 has_one_attached :file name
end

For the file name, set the name when calling. It also becomes a parameter key. ex):image, :file etc As an image, it feels like there is a file name column with attachments in it. By making this association, You can access the attached file with model name.file name.

2. Allow strong parameters to save images

controllers


 params.require(:message).permit(:text, :image)

As mentioned when defining the association, use the file name as the parameter key. Even at this time, the image that the column is formed will be applicable.

The above is the flow until storage.

The following is the flow until it is displayed.

3. Generated as HTML img element

Generate an img tag in HTML using a helper method called ʻimage_tag method`.

html.erb


<%= image_tag model name.file name%>
<%= image_tag message.image %>  #Example

Since it is associated, the image can be displayed by describing only model name.file name.

Basically, the image can be displayed up to this point. However, if there is no image at this rate, an error will occur.

4. Error resolution

Conditionally branch to the previous ʻimage_tag method` with an if statement.

html.erb


<%= image_tag message.image, if message.image.attached? %>

If an image is attached with the ʻattached? method`, it returns true and is read. If no image is attached, it returns false, is not loaded and no error occurs.

5. Image resizing

Use the variant method, which is a method that can be used when ActiveStorage is installed. If you add it to the above code,

html.erb


<%= image_tag message.image.variant(resize: '500×500'), if message.image.attached? %>

If you specify the display size of the image, it will not be larger than that.

6. Validation settings

In the current situation, if you imagine LINE, you will get an error if you do not have both text and image. Since it is not easy to use, the specification is that either text or image should exist.

model


validates :message, presence: true, unless: :was_attacher?

def was_attached?
 self.image.attached?
end

If the return value of the method is false, validation is verified. (If message does not exist)

Finally

It's too convenient to be able to easily access images just by associating! !!

Recommended Posts

Continued ・ Flow to implement image posting function using ActiveStorage
Flow to implement image posting function using ActiveStorage
How to implement image posting using rails
[Rails] Implement image posting function
How to implement image posting function using Active Storage in Ruby on Rails
Image posting function
How to implement the breadcrumb function using gretel
Rails learning How to implement search function using ActiveModel
Try to implement tagging function using rails and js
Implement category function using ancestory
[Rails] I tried to implement "Like function" using rails and js
Try to implement iOS14 Widget function
[Swift] How to implement the Twitter login function using Firebase UI ①
I tried to implement the image preview function with Rails / jQuery
[Java] Try to implement using generics
How to implement UI automated test using image comparison in Selenium
[Swift] How to implement the Twitter login function using Firebase UI ②
Try to implement login function with Spring-Boot
[Swift] How to implement the countdown function
How to implement TextInputLayout with validation function
[Swift5] How to implement animation using "lottie-ios"
Multiple image upload function using Rails Carrierwave
Implement user edit / update function without using devise
[Rails] Implementation of image enlargement function using lightbox2
[Swift] How to implement the LINE login function
Implement the star five function using the for statement
Implement partial match search function without using Ransuck
[swift5] How to implement the Twitter share function
Implement star rating function using Raty in Rails6
Implement the product category function using ancestry ① (Preparation)
[Android] Implement a function to display passwords quickly
Try to implement login function with Spring Boot
[For beginners] How to implement the delete function
[Swift] How to implement the fade-in / out function
Push the image to docker hub using Jib
I tried to implement a server using Netty
How to implement a circular profile image in Rails using CarrierWave and R Magick