How to use Carrierwave and Cloudinary

[bonaxl015]

Initial Configurations

1. Go to Gemfile and add these lines. Please use the versions indicated as it has some issues on their latest version.
   gem 'carrierwave', '1.3.1'
gem 'cloudinary', '~>1.13.2'

2. Then, run bundle install

3. Create a column on the table where you want to add the file. You can edit the migration file if you want to add some attributes.
   rails g migration add_image_to_post image:string

4. Run rails db:migrate

Active Storage Installation

1. Run below command to the terminal to install ActiveStorage
   rails active_storage:install

2. Run rails db:migrate

Carrierwave Configurations

1. Create an uploader for carrierwave. Run below code to terminal:
   rails g uploader image
   A file path app/uploaders/image_uploader.rb is automatically generated after running the code

2. Go to app/models/post.rb and add below code to mount the uploader in your model
   mount_uploader :image, ImageUploader
   Note: ImageUploader is the class used inside image_uploader.rb file

3. You may add validations in app/models/post.rb if you want to upload a single file (haven't tried to upload multiple files)
   has_one_attached :image

Cloudinary Configurations

1. Create an account on Cloudinary https://cloudinary.com/. Once account is created, API keys will be given and it is required when uploading files in the cloud

2. Store API keys on env variables

3. Create cloudinary.yml and save it under config directory. Then copy below code.

---
development:
  cloud_name: < insert_your_cloud_name >
  api_key: <%= ENV["CLOUDINARY_PUBLIC"] %>
  api_secret: <%= ENV["CLOUDINARY_SECRET"] %>
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: < insert_your_cloud_name >
  api_key: <%= ENV["CLOUDINARY_PUBLIC"] %>
  api_secret: <%= ENV["CLOUDINARY_SECRET"] %>
  enhance_image_tag: true
  static_file_support: true
test:
  cloud_name: < insert_your_cloud_name >
  api_key: <%= ENV["CLOUDINARY_PUBLIC"] %>
  api_secret: <%= ENV["CLOUDINARY_SECRET"] %>
  enhance_image_tag: true
  static_file_support: false

4. Go to config/environments/development.rb and add below line

Rails.application.configure do
  ...
  config.active_storage.service = :cloudinary
  ...
end

5. Go to config/storage.yml (Auto generated when ActiveStorage is installed) and add below code

cloudinary:
  service: Cloudinary

6. Go to app/uploaders/image_uploader.rb then include Cloudinary modules/classes to CarrierWave classes. Comment out storage :file and store_dir method

class ImageUploader < CarrierWave::Uploader::Base
  ...
  include Cloudinary::CarrierWave
  ...
  # storage :file
  ...
  # def store_dir
  #   "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  # end
  ...
end

Front End Side

1. Add file field form to accept files

= f.label :image
= f.file_field :image, class: "form-control", id: "image"

2. To display images from Cloudinary, always put .url at the end to get the URL associated with image
   = image_tag @post.image.url, class: "img img-fluid"

You're now all set! Enjoy!