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.
ruby 2.6.3 Rails 6.0.3
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.
First, in order to implement the multiple image posting function, we will create a sample application that only posts.
$ cd $ cd desktop $ rails new ImageSample
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.
$ cd ImageSample $ rails g scaffold post body:text image1:string image2:string $ rails db:migrate
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 similar changes to image2.
#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.
This is basically the same as the post list page.
#Change before <%= @post.image1 %> #After change <%= image_tag @post.image1_url ,size: '200x150' %>
Make similar changes to image2.
gem 'carrierwave' gem 'cloudinary' gem 'dotenv-rails'
$ bundle install
Create an uploader with the CarrierWave generator.
$ rails g uploader Image
Modify app / models / post.rb as follows.
class Post < ApplicationRecord mount_uploader :image1, ImageUploader mount_uploader :image2, ImageUploader end
Change lines 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 in the figure 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
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:
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.
cloudinary.yml Create a cloudinary.yml file in your config folder. Just copy and paste it into config / cloudinary.yml as below.
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
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! !!