Transforming Images on Upload With Rails and Active Storage

Ruby on Rails is well known for some of its powerful features like Active Record and Active Storage. These two features work together by abstracting file uploads and storing them in your models. Active Record works with the popular cloud providers like Amazon S3 and Google Cloud Storage, but third-party adapters are also available. Cloudinary’s Ruby/Rails SDK includes an Active Storage adapter that you can configure so asset uploads in your Rails application are stored in Cloudinary instead of the local file system or one of the cloud providers. One of the reasons that Rails is such a popular web framework is its simplicity. We’ll look at how we can add uploads to a Rails app with some really simple configuration using the Cloudinary Active Record adapter. In this blog post, we’ll combine the simplicity of our Active Storage uploads while applying some of Cloudinary’s image transformations and optimizations to our uploads.

Before applying transformations, you need to configure Active Storage to use Cloudinary as the service provider. In your config/storage.yml, declare the Cloudinary service:

cloudinary:
  service: Cloudinary

Then, tell Active Storage to use this configuration by adding the following to config/environments/development.rb (or the appropriate environment file):

# Use Cloudinary for Active Storage
config.active_storage.service = :cloudinary
Code language: PHP (php)

If you haven’t already set up Active Storage, be sure to run:

rails active_storage:install
rails db:migrate

This will set up and create database migrations for active storage and migrate your database.

Once Cloudinary is configured as an Active Storage service, there are a couple of easy steps to get your file upload form ready to use.

1. Include Active Storage’s JavaScript:

   import { DirectUpload } from "@rails/activestorage"
   

2. Annotate your file input field in the Rails form:

   <%= form.file_field :avatar, direct_upload: true %>
   

It’s incredible how easy it is to get from zero to uploading files from a web form to Cloudinary. A little bit of configuration and a couple of tiny snippets of code is all it takes! This is great, but we’re not taking full advantage of all that Cloudinary has to offer with this setup. We don’t have a way to apply transformations, add-ons, or other customizations just yet. Let’s move on to making this plug-and-play setup a little bit more flexible.

To apply transformations to our Active Storage direct upload, we will need to take advantage of Cloudinary Upload Presets. Upload presets allow you to define a set of options, add-ons, and transformations to images uploaded using the preset.

1. Go to your Cloudinary Console.
2. Navigate to Settings and open Upload.
3. Click the Add Upload Preset button at the top right of the page.
4. Create a new upload preset and define the transformations you need (i.e. enable add-ons, resize images, etc.)
5. Save the upload preset Once you have an Upload Preset configured with the transformations you want to have for your Active Storage uploads, there are two ways that it can be applied.

After you’ve saved your new preset, you should be back on the upload presets page. Next to the Add Upload Preset button, there’s a Manage Defaults button. Click it to configure the default presets.

We’re able to apply a default preset for images, videos, and raw files for both the Cloudinary API and Media Library. The Cloudinary API includes SDKs like the Rails SDK, so this is the one we’ll want to set. Select your new preset under API/Image and hit the save button.

If you’re OK with this preset being applied to every image uploaded through the Cloudinary API, this is an acceptable and easy approach. If it’s not, we’ll see how we can set up our Active Storage direct upload to use the preset instead of setting it globally.

If you prefer not to have a global default (or need a different behavior for your Active Storage uploads), you can configure your Rails app to pass a specific upload preset via the config/storage.yml file. This method allows you to tailor the upload parameters for Active Storage only:

cloudinary:
  service: Cloudinary
  upload_preset: `active_storage_uploads`
Code language: JavaScript (javascript)

With this configuration, the Active Storage direct upload requests will automatically include your specified preset, ensuring that only images uploaded from your Rails application receive the transformations and options defined in active_storage_uploads.

Integrating Cloudinary with Rails and Active Storage is both straightforward and robust. With just a few configuration changes, you can set up direct uploads and use Cloudinary’s image transformation capabilities. Apply a global upload preset or tailor a preset specifically for Active Storage uploads to achieve consistent, optimized images for your application. Combine Rails Active Storage and Cloudinary and get more granular control over your visual media assets.

Contact us to learn more.