[Ruby] Upload multiple images easily with rails rails+carrierwave+cloudinary

3 minute read

1. Overview

When you want to make an application that uses image posting with rails, there are probably 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

![ezgif.com-video-to-gif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390448/3f7dbeeb-4630-d759-(03ab-7b2a18f9d09c.gif)

Before you start: Register with Cloudinary

Let’s start registration from this link. https://cloudinary.com/

If you press sign up for free in the upper right, you will be taken 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 until the main registration is complete.

3. Implementation of multiple image posting function

3.1. Advance preparation

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

terminal


$ cd
$ cd desktop
$ rails new ImageSample

3.2. Functions around posts

Functions around posts are created using scaffold. At that time, create multiple image columns. This time, I will be able to post two images, image1 and image2, at the same time. If you want to post three or more at the same time, try adding more columns to image3 and image4.

terminal


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

3.3.view changes (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 the same changes for image2.

3.4.view changes (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 the same changes for image2. As for ,size: ‘200x150’, there is no problem if you do not describe it, but it was described to prevent the image from spreading to the full screen.

3.5.view changes (post detail 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 the same changes for image2.

Add ##3.6.gem

Gemfile


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

Once added,

terminal


$ bundle install

To reflect.

3.7. Uploader

Create uploader

Create an uploader with the CarrierWave generator.

terminal


$ rails g uploader Image

Modify the model

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 line 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 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 in the application directory (where app, db, and Gemfile are). Then enter the following in the .env file you created.

.env


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

Use “Cloud name”, “API Key”, and “API Secret” of the acquired Cloudinary account. Here, please replace each value after “=” with the key you got in My page of Cloudinary (the number will change depending on the individual).

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

.gitignore


/.env

cloudinary.yml

Create a cloudinary.yml file in your config folder. Just copy and paste to config/cloudinary.yml as follows.

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 am sorry that the explanation is minimal, but if you like it, please refer to it! Thank you for reading to the end! !!