Image Uploads

Search…
Image Uploads
The CarrierWave and Cloudinary gems provide us with an easy way to allow image uploads through forms.
Installation
In your Gemfile, include
1
gem "carrierwave"
2
gem "cloudinary"
Copied!
and then bundle install.
In the file config/environment.rb, add this line to the end:
1
require "carrierwave/orm/activerecord"
Copied!
Getting started with Carrierwave
Add a column to store the file's URL
You need to have a column of type "string" in whichever table that you want to attach a file upload to. This column will, ultimately, store the URL of the uploaded file after CarrierWave hosts it.
If you already included the column when you generated your resource, great. Skip to the next step.
If not, you have to add it. For example, here we add a column called "avatar" to users, which we plan to store an image in:
1
rails generate migration add_avatar_to_users avatar:string
2
rails db:migrate
Copied!
In your case, it may be song, transcript, image, etc.
Generate an uploader
From the command line:
1
rails generate uploader Avatar
Copied!
In your case, change "Avatar" to match whatever you are trying to upload / the column you added to the table: Song, Transcript, Image, etc.
Restart your rails server.
Mount the uploader in the model
In the relevant model,
1
# app/models/user.rb
2
class User < ActiveRecord::Base
3
  mount_uploader :avatar, AvatarUploader
4
end
Copied!
Again, customize to match your use case. :avatar should be the column you created, and AvatarUploader should be whatever you generated.
Enhance the form
We need an <input type="file"> in our form to handle the upload. If you already have a type="text" input, change it; or if you don't, add a new one:
1
<input type="file" id="avatar" name="avatar" class="form-control">
Copied!
If you are customizing a Devise form, it would instead look like <%= f.file_field :avatar, :class => "form-control" %>.
We also need to change the <form> tag itself to allow files to be uploaded by adding the enctype="multipart/form-data" attribute:
1
 <form action="/create_user" method="post" class="form-horizontal" enctype="multipart/form-data">
Copied!
If you are customizing a Devise form, it would instead look like <%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => { :multipart => true }) do |f| %>.
Assign the file just like any other params
In your create/update actions, assign the new file upload just like any other form parameter:
1
@user.avatar = params.fetch(:avatar)
Copied!
If you are customizing a Devise form, you'll have to instead allow this additional parameter through security.
That should be it!
Retrieving the upload
CarrierWave will, by default, process the upload and then store it in your public folder, so that you can use it just like any other URL on the internet.
For example, we could now do
1
   <img src="<%= user.avatar %>" class="img-responsive">
Copied!
Adding Cloudinary for storage
CarrierWave works fine locally at this point, but it's going to break if you try to host your project live on Heroku. That's because Heroku won't let you permanently write to the public folder of a live application. You'll need to find a hosting service, like Amazon AWS to host any uploaded files. Fortunately, Cloudinary makes it easy to host uploaded images and they have a generous free tier.
Update your ImageUploader
To integrate Cloudinary, first adjust your ImageUploader file so it looks like:
1
class ImageUploader < CarrierWave::Uploader::Base
2
  include Cloudinary::CarrierWave
3
end
Copied!
Most importantly, make sure you remove the line that says:
1
  storage :file
Copied!
Retrieve Cloudinary API info
Next, you'll need to sign up for an account and get your API info. You can find your cloud name, by going to Settings and clicking the Account tab. You can find your API key and secret by going to Settings and clicking the Security tab.
Add Cloudinary API info in an .env file
For security, it's best to store your keys in environment variables. Read more on the how and why this is important in the guide on storing your credientials sercurely. In short, if you're using dotenv, you can create a file called .env in the root folder of your app. Then add the following content to the .env file, replacing your information as needed:
1
CLOUDINARY_CLOUD_NAME="replace me with your cloud name"
2
CLOUDINARY_API_KEY="replace me with your api key"
3
CLOUDINARY_API_SECRET="replace me with your api secret"
Copied!
After pushing to Heroku, you'll need to manually add these environment variables in the Settings tab of your application.
Store Cloudinairy API info in an intializer
Finally, create an initializer file called cloudinary.rb in config/initializers and add the following content:
1
Cloudinary.config do |config|
2
  config.cloud_name = ENV["CLOUDINARY_CLOUD_NAME"]
3
  config.api_key = ENV["CLOUDINARY_API_KEY"]
4
  config.api_secret = ENV["CLOUDINARY_API_SECRET"]
5
  config.cdn_subdomain = true
6
end
Copied!
Further Reading
​Official docs​
​Railscast #253​
​Cloudinary Carrierwave integration​
Sending Email with Mailgun
Storing credentials securely
Last modified 3yr ago
Copy link
Contents
Installation
Getting started with Carrierwave
Add a column to store the file's URL
Generate an uploader
Mount the uploader in the model
Enhance the form
Assign the file just like any other params
Retrieving the upload
Adding Cloudinary for storage
Update your ImageUploader
Retrieve Cloudinary API info
Add Cloudinary API info in an .env file
Store Cloudinairy API info in an intializer