Flow to implement image posting function using ActiveStorage

Introduction

There is a function that often uploads images on SNS, but I will introduce the Gem used when implementing it in Rails. Since it will be long, I will focus on the preparation stage of implementation this time. Scheduled twice in total.

What is Active Storage?

It's now included in Rails without having to install it as a Gem. You will be able to use methods that make it easy to upload files such as images, and you can easily create a table to save images.

Flow until implementation of image upload function

  1. Install ImageMagick
  2. Install two gems
  3. Reboot the local server
  4. Install Active Strage
  5. Table generation

1. Install ImageMagick

In the first place, ImageMagick is an image processing tool, not a Gem, but a category of software. When installing from Homebrew


brew install imagemagick

ImageMagick alone cannot handle it in Ruby, so you need to install the following two gems.

2. Install two gems

(1)MiniMagick ImageMagick features will be available in Ruby. (2)ImageProcessing Adjust the size of the image, which cannot be done with MiniMagick alone.

Gemfile


gem 'mini_magick'
gem 'image_processing', '~>1.2' #Specifying the version

OK at the bottom of the Gemfile.   After writing, don't forget to use the terminal

bundle install

3. Reboot the local server

rails s

Don't forget when you newly install Gem.

4. Install Active Storage

It was sunny and Active Storage became available, so Install using the terminal

rails active_storage:install

When installed, a migration file will be generated automatically.

5. Table generation

If there is no particular column change, leave it as it is

rails db:migrate

Confirm that two tables are generated by this migration.

point

-[x] Implement the image upload function using ActiveStorage. -[x] Install two gems so that they can be used in Ruby.

Finally

Next time, I will summarize how to save images and how to display saved images.

Recommended Posts

Flow to implement image posting function using ActiveStorage
Continued ・ 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
[Java] Try to implement using generics
[Swift] How to implement the Twitter login function using Firebase UI ①
I tried to implement the image preview function with Rails / jQuery
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
[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
Image preview function
How to implement a circular profile image in Rails using CarrierWave and R Magick
[Implementation procedure] Implement image upload function with Active Storage
Try to implement using Rakuten product search API (easy)
Write byte array image data to outputstream using ImageIO