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.
ruby 2.6.3 Rails 6.0.3
Scheduled for completion
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.
$ 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.
$ 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.
# 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)
# 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.
# Change before <%= @post.image1 %> # After change <%= image_tag @post.image1_url ,size: '200x150' %>
Make the same changes for image2.
gem'carrierwave' gem'cloudinary' gem'dotenv-rails'
$ bundle install
Create an uploader with the CarrierWave generator.
$ rails g uploader Image
Modify the model
Modify app/models/post.rb as follows.
class Post <ApplicationRecord mount_uploader :image1, ImageUploader mount_uploader :image2, ImageUploader end
Change line 6~8 of 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.
# 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.
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.
Create a cloudinary.yml file in your config folder. Just copy and paste to config/cloudinary.yml as follows.
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! !!