Just about every application inevitably needs to support file uploads of some kind. For example, a user might need to associate a profile picture with their bio, or notes may be more helpful if attachments could be attached, etc. Cloudinary can be a great choice, as it’s quick and easy to implement, and handles a lot of the heavy lifting for us, including integration with various cloud storage providers.
We use the
dot-env gem for storing API keys in our
.env file. Install
dot-env by adding it to your
1 2 gem "dotenv-rails" gem "cloudinary"
Of course, run the command
Add two files,
.env.sample in your project root and add
.env in the
.gitignore because we don’t want our secret keys to be visible in git or anywhere else.
Now let’s create a free Cloudinary account and get our API keys.
I assume at this step that you have already created a Cloudinary account and just need to grab the secret keys. So, here you can find your API keys.
Add this to your
1 2 3 CLOUD_NAME=yourcloudname API_KEY=yourapikey API_SECRET=yourapisecret
Of course, you need to replace these dummy keys with your original ones. Also, add dummy values to
.env.sample so as to send this file to git.
1 2 3 CLOUD_NAME=dummycloudname API_KEY=dummyapikey API_SECRET=dummyapisecret
cloudinary.yml file in config folder and make sure it is something like this.
1 2 3 4 5 6 7 8 9 10 11 development: cloud_name: <%= ENV['CLOUD_NAME'] %> api_key: <%= ENV['API_KEY'] %> api_secret: <%= ENV['API_SECRET'] %> production: cloud_name: <%= ENV['CLOUD_NAME'] %> api_key: <%= ENV['API_KEY'] %> api_secret: <%= ENV['API_SECRET'] %> secure: true cdn_domain: true
config/storage.yml file with the following line.
1 2 cloudinary: service: Cloudinary
Tell ActiveStorage which service to use for image uploads by putting this line in
1 config.active_storage.service = :cloudinary
Make sure you have this line in your application.js file.
Now that the basic setup of Cloudinary is done, let’s move on to the implementation.
For our example, we’ve got a
Profile object that we want to be able to an image to. So, add this to
1 has_one_attached :image
Add this to your
1 2 3 = f.input :name = f.input :short_description, as: :text = f.input :image, as: :file
Your view that displays the image (such as
show.html.haml) needs to include the following code.
1 = image_tag @profile.image if @profile.image.attached?
Before running and testing, you need to export your environment variables:
1 2 3 export CLOUD_NAME=yourcloudname export API_KEY=yourcloudname export API_SECRET=yourcloudname
Cloudinary is now installed and configured.