Uploading Images in Rails 6 Using Active Storage, Trix and Cloudinary

Active Storage is a Rails module used to upload files to a cloud service. Cloudinary is such a service and, in addition, a complex platform that enables developers to store, transform, optimize, and deliver images and videos. Cloudinary has a free plan available, and it’s quite easy to get started with them. Trix is the editor used by Action Text. With Trix, you can format text, add links, and upload files very easily. In this article, we will deal with uploading images in Rails 6 using Active Storage, Trix, and Cloudinary. We will use Rails 6.1.4.1 and Ruby 3.0.2.

Set Up an Application 

We'll build a simple blog application, with a Post model, which will have rich text.

From your terminal type:

rails new blog_app

After the app is created, we change the directory to its folder:

cd blog_app

Install the ImageProcessing and Cloudinary Gems

Next, we need to install the ImageProcessing gem, which is used to generate derivative images from the original uploaded image. Also, we’ll install the Cloudinary gem.

The ImageProcessing gem processes images using one of these two libraries: ImageMagick and libvips. Before installing this gem in your application, you need to install one or both of these libraries. Please check their websites for instructions on how to install them.

In our example application, we’ll use the libvips library. After the library is successfully installed, we configure the application to use the libvips processor operated by the ruby-vips gem. In the application.rb file in the config/ folder, we add this line:

Rails.application.config.active_storage.variant_processor = :vips

After that, open your Gemfile and uncomment this line:

gem 'image_processing', '~> 1.2'

Then add the Cloudinary gem to it:

gem 'cloudinary', '~> 1.21'

Then we run:

bundle install

Install ActionText with the Trix Editor

From your terminal type:

bin/rails action_text:install

This will install the Yarn package, and also will generate two migration files. These are the migration files to generate the active_storage_blobs and active_storage_attachments tables, and the action_text_rich_texts table respectively.

Now we run:

bin/rails db:migrate

Generate the Post Scaffold

Let’s now generate the Post scaffold. From your terminal type:

bin/rails g scaffold Post title:string content:rich_text
bin/rails db:migrate

Set the Root Route

We will set the root  route of our application to the Posts index page:
In the config/routes.rb  file add this line at the top of the Rails.application.routes.draw do block:

root 'posts#index'

Set Up Cloudinary

There are quite a few ways to integrate Cloudinary into a Rails application. In this tutorial, I choose to configure it in the cloudinary.yml file. For alternatives, please visit the Cloudinary documentation site.

You can download this cloudinary.yml file while logged in to your Cloudinary account. Then you place it within the config/ folder of your Rails app. You can customize it to suit your needs. The configuration must contain the cloud_name, the api_key, and the api_secret.  These are already in the downloaded cloudinary.yml file. You can see them in the main dashboard of your account.

Declare the  Cloudinary Service in the storage.yml File

In config/storage.yml, we add this service after the test and local service:

cloudinary:
  service: Cloudinary

Now, all we need to do is to use it. In config/environments/production.rb replace this line:

config.active_storage.service = :local

with:

config.active_storage.service = :cloudinary

After that, all the images uploaded with Trix will go to your Cloudinary cloud.