Using Cloudinary With CarrierWave Rails

tutorial.md

Uploading Files To A Cloud Via Cloudinary and CarrierWave with Rails

This is a tutorial on how to use Cloudinary cloud services with carrierwave to upload files, in this case we would like to use it for image uploading for our users avatar

Sign Up For A Cloudinary Account

Cloudinary -> Sign up for an account here!

Take Note Of Details In Your Dashboard

After successfuly signing up, you will be redirected to your dashboard.
In the dashboard you will see your account details.

Account Details

  Cloud name:           'this can be any value'
  API Key:              'this can be any value'
  API Secret:           'this can be any value'
  Environment variable: 'this can be any value'

Get Required Gems

In Gemfile

gem 'figaro'
gem 'carrierwave'
gem 'cloudinary'

run bundle install in your terminal

Setting Up Figaro

In your terminal

bundle exec figaro install

Open up application.yml file located inside config folder.
Insert information from your Cloudinary console page to this file for security.

cloudinary_cloud: 'Cloud name'
cloudinary_key: 'API Key'
cloudinary_secret: 'API Secret'

You don't need the environment variable here

Setting Up Configuration For Cloudinary

Create a file called cloudinary.rb in config/initializer folder.
Type the code below in that file.

Cloudinary.config do |config|
    config.cloud_name = ENV['cloudinary_cloud']
    config.api_key = ENV['cloudinary_key']
    config.api_secret = ENV['cloudinary_secret']
end

Setting Up Carrierwave

To follow these steps I will make a couple of assumptions:

• You have a user model, view and controller
• You have a edit view
• You have a form for your user to upload an avatar picture
• You are using active record

The steps are as follow:

---

Generate an uploader for your avatar picture

In your terminal

rails generate uploader Avatar

This will generate a file avatar_uploader.rb in app/uploader folder

---

Add avatar column to your users table

In your terminal

rails generate migration add_avatar_to_users avatar:string

When the command runs succesfully, type in your terminal

rails db:migrate

If you check schema.rb in your db folder your users table should have an avatar column now.

---

Mount the uploader to the user model

Type the following code in user.rb in app/models folder

class User < ApplicationRecord
    mount_uploader :avatar, AvatarUploader
end

---

Edit form used to edit user information

Add an input field for users to upload an image

<%= form_for @user do |form| %>
    <% "whatever other fields you have" %>
    
    <%= form.label :avatar %>
    <%= form.file_field :avatar %>
    
    <% "submit button here somewhere" %>
<% end %>

---

Configure avatar_uploader.rb

Open up avatar_uploader.rb in app/uploader.
You will have more lines of code in this file but these are bare necessities that you need.

class AvatarUploader < CarrierWave::Uploader::Base
    include Cloudinary::CarrierWave
end

Everything else originally in the file can be commented out.
To have a standard version and thumbnail version of your image.

class AvatarUploader < CarrierWave::Uploader::Base
    include Cloudinary::CarrierWave
    
    version :standard do 
        process resize_to_fill: [200,200, :north]
    end
    
    version :thumb do
        process resize_to_fit: [50,50]
    end
end

---

Diplaying image in view

In your view page or whatever.html.erb file.

    <%= image_tag @user.avatar_url %>

To display standard and thumb versions of the the image.

    <%= image_tag @user.avatar.standard.url %>
    <%= image_tag @user.avatar.thumb.url %>

Disclaimer

If you would like to upload multiple images the steps here would not work.
For more information on how to achieve the above visit the link below.

• Carrierwave Git Page

For more information regarding the tools used, you may visit the links below.

• Figaro Git Page
• Cloudinary Git Page
• Rails Cloudinary Integration Documentation