Upload media in rails app to Cloudinary for FREE (no credit card)
By: Mahmoud Bakr
Tags: Deployment, Cloudinary, File Upload, Rubyonrails5, Heroku

A month ago I was doing my capstone project in the Ruby on Rails module included in the Microverse program, and as a student at this amazing school, I’m always willing to build and deliver the best version of the app at a reasonable amount of time!

What happened was me building the app without any problems until I deployed it to Heroku, uploaded my media files, and tested it, at first everything worked just fine but a couple of hours later, I revisited the app, and there we go! WHERE ARE MY IMAGES?!!

If you’re working with Heroku deployment and uploading files to your app and then type in the terminal

$ heroku reset

to reset your app dyno file system, you’ll find then that your uploaded files are gone!

After spending a whole day searching for the problem and learned about it here is what I’ve learned:

1- There is a thing called the “dyno system” and this is in Heroku where your deployed application in your free account is resetting automatically and removing all the uploaded media from the Heroku file system because there are no cloud services paid for to hold up your files on.

2- I found out that there are several cloud services that has a free plan for their users to use such as Google Cloud Services, Microsoft Azure, and Amazon AWS.

3- The problem with these previous awesome cloud services to me was that I didn’t have a credit card back then to sign up with and use my free limited amount of cloud storage on any of them!

4- I kept looking and searching until I found for the first time a free cloud storage (Cloudinary). And it allowed me to sign up without the need of having a credit card.

So until this point, I said to myself: “that’s great! Everything should work fine now”. I did the setup using Cloudinary gem and wrote the required code to make it work which I’ll be covering in a moment, and I found another problem with Heroku that blew me out! When they found out that I was trying to connect my app with Cloudinary through their services, they asked for a verification of my Cloudinary credentials data. which you can do by creating addons by Heroku to Cloudinary. Learn more about it here…

It did make sense to me so I took a couple more minutes trying to do what they asked me for, and then Heroku asked me for a credit card! WHAT!! Hey, Help!

I literally was desperate finding out a proper solution, until I thought about the code and found out that I don’t have to include Heroku in the uploading process at all, I mean that when I upload an image for example through my applications, then in my code it will directly upload it to my cloud storage dashboard in Cloudinary, generate a link to the image and then embed it in the application (note: the upload takes a couple more seconds to finish than usual in my side), so how I did that!

first of all, you need to create a Cloudinary account, and once you do that, go to your account dashboard. See this link to learn more.

Once you download your cloudinary.yml file, copy and paste it in the config folder within your Rails application will be something like this

---

development:

cloud_name: "sample"

api_key: "874837483274837"

api_secret: "a676b67565c6767a6767d6767f676fe1"

enhance_image_tag: true

static_file_support: false

production:

cloud_name: "sample"

api_key: "874837483274837"

api_secret: "a676b67565c6767a6767d6767f676fe1"

enhance_image_tag: true

static_file_support: false

test:

cloud_name: "sample"

api_key: "874837483274837"

api_secret: "a676b67565c6767a6767d6767f676fe1"

enhance_image_tag: true

static_file_support: false

The second thing to do is to make sure that you have a working setup for handling the media uploading like ActiveStorage in Rails, paperclip, or carrierwave.

In my case, I’d prefer using paperclip because it’s easy to set up, so handy and most importantly there is a gem attaching it with Cloudinary called paperclip-cloudinary.

after you make sure that everything is fine with the paperclip gem set up, go ahead to the Gemfile and add the following two gems

gem 'paperclip-cloudinary' gem 'cloudinary', require: false

and then open your terminal and paste this command line

$ bundle install

after the terminal finishes installing the gems, go to your whatever model.rb file you want to attach files to it and add the following lines to your code

class Example < ApplicationRecord

---

has_attached_file:image, // it could be any name you want

:storage => :cloudinary,

:path => 'name_of_folder/:class/:id/:style/:filename'

---

let’s walk through what this path means, first the name_of_folder is that folder will be generated in your Cloudinary media library, and then the class is going be the next folder name the same as your model name which in this case will be Example, then the id is going to be the number of the created object in your app, then the style of the uploaded file and finally the name of the file, all is gonna be there at your Cloudinary media library after you upload your file.

This will generate the direct uploading from your app to your Cloudinary dashboard without any problems.

The last step is to go to the config/storage.yml file and add the following lines and then you’re good to go.

some_name:

service: Cloudinary

one last thing to get, if you’re using the credentials attachment between Heroku and your Cloudinary account and decided to put make the uploading process to go through it, you have to go config/environments/production.rb and change the following line to be like this

config.active_storage.service=:local

you should change local to the name of the cloud services you’re using

config.active_storage.service=:cloudinary

And the same thing in the development.rb and test.rb files if you’re willing to make it work while you still in these two modes.

now you can run:

$ heroku reset

after you uploaded your files and you’ll still see them shining up there in your app and if you right-clicked a file and saw its URL you’ll see the link generated by Cloudinary.

And that’s everything! Thanks so much for making it all the way down here and happy coding.