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.
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
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
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 %>
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 %>
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.
For more information regarding the tools used, you may visit the links below.