Upload multiple images easily with rails rails + carrierwave + cloudinary

1. Overview

When you want to make an application that uses image posting with rails, there are many people who want to post multiple images at once. This time, while developing a simple rails posting application, we will implement it so that multiple images can be posted.

• This image will be posted using cloudinary.

2. Introduction

Development environment

environment

ruby 2.6.3
Rails 6.0.3

Scheduled for completion

Before you start: Sign up for Cloudinary

Start registering from this link. https://cloudinary.com/

Press sign up for free on the upper right to jump to the registration screen. After registering various information and completing the temporary registration, please open the final registration message sent to your e-mail address and complete the main registration.

3. Implementation of multiple image posting function

3.1. Preparation

First, in order to implement the multiple image posting function, we will create a sample application that only posts.

Terminal

$ cd
$ cd desktop
$ rails new ImageSample

3.2. Functions around posting

Functions around posting are created using scaffold. At that time, create multiple image columns. This time, we will be able to post two images, image1 and image2, at the same time. If you want to post 3 or more at the same time, try increasing the columns such as image3 and image4.

Terminal

$ cd ImageSample
$ rails g scaffold post body:text image1:string image2:string
$ rails db:migrate

3.3. View change (new post page)

Edit _form.html.erb so that you can select the image on the new post page.

ruby:posts/_form.html.erb

  #Change before
<%= form.text_field :image1 %>

  #After change
<%= form.file_field :image1 %>

Make similar changes to image2.

3.4. View change (post list page)

ruby:posts/index.html.erb

  #Change before
<td><%= post.image1 %></td>

  #After change
<td><%= image_tag post.image1_url ,size: '200x150' %></td>

Make similar changes to image2. Regarding, size: '200x150', there is no problem if you do not write it, but I wrote it to prevent the image from spreading to fill the screen.

3.5.view change (post details page)

This is basically the same as the post list page.

ruby:posts/show.html.erb

  #Change before
<%= @post.image1 %>

  #After change
<%= image_tag @post.image1_url ,size: '200x150' %>

Make similar changes to image2.

3.6. Addition of gem

Gemfile

gem 'carrierwave'
gem 'cloudinary'
gem 'dotenv-rails'

Once added,

Terminal

$ bundle install

To reflect.

3.7. Uploader

Creating an uploader

Create an uploader with the CarrierWave generator.

Terminal

$ rails g uploader Image

Model modification

Modify app / models / post.rb as follows.

app/models/post.rb

class Post < ApplicationRecord
    mount_uploader :image1, ImageUploader
    mount_uploader :image2, ImageUploader
end

Uploader settings

Change lines 6-8 of app / uploaders / image_uploader.rb.

app/uploaders/image_uploader.rb

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

Change the above as shown in the figure below.

app/uploader/image_uploader.rb

  # Choose what kind of storage to use for this uploader:
  if Rails.env.production?
    include Cloudinary::CarrierWave
    CarrierWave.configure do |config|
      config.cache_storage = :file
    end
  else
    storage :file
  end
  # storage :fog

3.8. Cloudinary API key

.env file

Create a file called .env yourself in the application directory (the directory where the app, db and Gemfile are located). Then enter the following in the .env file you created:

.env

CLOUD_NAME=q0w9e8r7t6yu5  #← This value varies from person to person! !!
CLOUDINARY_API_KEY=123456789012345 #← This value varies from person to person! !!
CLOUDINARY_API_SECRET=1a2s3d4f5g6h7j8k9l0a1s2d4f5g6h1q #← This value varies from person to person! !!

Use the "Cloud name", "API Key", and "API Secret" of the acquired Cloudinary account. Here, rewrite each value after "=" with the key obtained from My Page of Cloudinary earlier (the number varies depending on the individual).

.gitignore Add the following to .gitignore in your application directory.

.gitignore

/.env

cloudinary.yml Create a cloudinary.yml file in your config folder. Just copy and paste it into config / cloudinary.yml as below.

config/cloudinary.yml

development:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
test:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false

4. At the end

I think that you can now post multiple images. I'm sorry that the explanation is minimal, but if you like, please refer to it! Thank you for reading to the end! !!