Hinsei/tutorial.md

## tutorial.md

      
    Raw
  

              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