# 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](http://cloudinary.com/) -> Sign up for an account here! ## Take Note Of Details In Your Dashboard After successfuly signing up, you will be redirected to your dashboard.<br/> 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 ``` ruby 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.</br> Insert information from your Cloudinary console page to this file for security. ``` ruby 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.</br> Type the code below in that file. ```ruby 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 ``` ruby 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 ``` erb <%= 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**.</br> You will have more lines of code in this file but these are bare necessities that you need. ``` ruby class AvatarUploader < CarrierWave::Uploader::Base include Cloudinary::CarrierWave end ``` Everything else originally in the file can be **commented** out.</br> To have a standard version and thumbnail version of your image. ``` ruby 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. ``` ruby <%= image_tag @user.avatar_url %> ``` To display standard and thumb versions of the the image. ``` ruby <%= 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.</br> For more information on how to achieve the above visit the link below. * [Carrierwave Git Page](https://github.com/carrierwaveuploader/carrierwave) For more information regarding the tools used, you may visit the links below. * [Figaro Git Page](https://github.com/laserlemon/figaro) * [Cloudinary Git Page](https://github.com/cloudinary/cloudinary_gem) * [Rails Cloudinary Integration Documentation](http://cloudinary.com/documentation/rails_carrierwave)