Cloudinary Uploads
Objectives
- Use Cloudinary to upload images in Rails.
Basic file uploads
In Rails, file uploads can be done via the standard form helper or bootstrap form helper.
View
<%= form_for @person do |f| %>
<%= f.text_field :name %>
<%= f.file_field :picture %>
<%= f.submit %>
<% end %>
Just by adding a file_field to a form in rails it automatically converts it to a multi-part form and handles the file upload.
Controller
In your controller you can access it like any other param. In this example it would be params[:person][:picture].
The value in that param will be a UploadFile object which has several methods we can use to interact with the file. For cloudinary we only need the path method which will give us the path to the newly uploaded file.
Details about UploadedFile object
Cloudinary
Cloudinary can be setup by either adding it via a Heroku addon...
heroku addons:create cloudinary
This will sign you up for a free cloudinary account and should create a config value with the cloudinary credentials. Or signup on Cloudinary's website and grab the config value from the Cloudinary dashboard.
Either way, your config value should look like this in your .env file:
CLOUDINARY_URL=cloudinary://xxxxx:xxxxx@xxxxxxx
Setting up the gem
Add the cloudinary gem to your Gemfile. The gem automatically looks for the CLOUDINARY_URL environment variable. As long as you have your .env file set up correctly, it will "just work™".
In Gemfile
gem 'cloudinary'
Run bundle install as well.
Processing the upload
The Cloudinary::Uploader.upload method is used to upload a file. All we have to pass in to it is the path to the image that was uploaded to the server.
The method returns a hash with some various information about the upload including file size, dimensions, format, url, and public_id. The public_id is what we need to store to display the image in the future.
uploaded_file = params[:person][:picture].path
cloudnary_file = Cloudinary::Uploader.upload(uploaded_file)
#store this public_id value to the database
#cloudnary_file['public_id']
render json: cloudnary_file
Displaying the image
To display the image we just need to use the cl_image_tag helper and pass it the (previously stored) public_id. This works exactly like the standard image_tag helper, but loads images from Cloudinary instead of images in the assets folder.
<%= cl_image_tag(@person.picture) %>
You can also pass in settings for width, height, etc to manipulate the image on the fly.
<%= cl_image_tag(@person.picture,
:width => 400, :height => 400,
:crop => :fill, :gravity => :face)
%>