Image Uploading with Active Storage

Active Storage facilitates uploading files to a cloud storage service and attaches those files to active record objects. Active Storage comes with a local support for development and testing. We will be focusing on the local disk application.

Active Storage uses ImageMagick to generate an image from a non-image upload like PDFs and videos. ImageMagick can do more than just convert an image, visit the docs here ImageMagick to get more info.

To include Active storage in a rails project, start off by installing active storage in the Gemfile by running “rails active_storage:install” in the terminal. This will generate a migration that will add two tables into your database, active_storage_blobs and active_storage_attachments. Run “rails db:migrate” to migrate these into your database. Previously we discussed, that active storage is meant to be used to upload images to a cloud service. This is done by altering the config/environments/development.rb file. Inside that file. There you can change the service to whatever cloud service you choose. For instance for amazon you would change it to

config.active_storage.service = :amazon

And you would need to change the config/storage.yml file to this:

amazon:
service: S3
access_key_id: ""
secret_access_key: ""
region: ""
bucket: ""

Finally install the gem to help facilitate this paring:

gem "aws-sdk-s3", require: false

The process is similar to other cloud services.

So far, we have discussed how an image is uploaded with Imagemagick, how to install active storage and finally what active storage does? It facilitates uploading files to a cloud storage and attaches files to Active Record objects.

Now how active storage attaches files to its objects. First, Active Storage blobs, A blob is a record that contains metadata about a file and a key for where that file resides on the service. Blobs can be created in two ways

// A blob is an ActiveStorage class which means its has its own class methods. 
ActiveStorage::Blob < ActiveStorage::Record
// Ahead of the file being uploaded server-side to the service, doesn't require any client-side JavaScript integration, and can be used by any other back-end service that deals with files. create_and_upload!
// Ahead of the file being directly uploaded client-side to the service, can work with deployments like Heroku that do not provide large amounts of disk space, is faster.
create_before_direct_upload!

A blob is what a file or image is turned into after been processed by ActiveStorage. Now the only thing Active Storage has to do is connect the blob to a rails or ActiveRecord object and this is done just by adding a polymorphic join table that stores your model class name. Don’t forget to add the column to your data model and migrate.

class User < ApplicationRecord
has_one_attached :avatar
end

And that’s really it. now when you want to display that image you just need to mine through the attributes of the model and include that blob into a img tag on the frontend. Before I end this article I want to discuss Image processing. This is a method to perform some operations on an image, such as resizing, to get an enhanced image or to extract some useful information from it. This is done by using the variant keyword, it creates a variation of an image, on the attachment.

<%= image_tag user.avatar.variant(resize_to_limit: [100, 100]) %>

Active storage lazily transforms the og blob into the specific format and redirects to its new service location. To enable variants:

Add gem 'mini_magick' to gemfile. 

When the browser hits the variant URL, Active Storage will lazy transform the original blob into the format you specified and redirect to its new service location.

Thanks for reading!