Using Active Storage To Handle Image Uploads In Ruby On Rails
Published: 2024-04-28 11:19:42

**Active Storage** is a framework that handles file uploads, allowing you to store them as attachments locally or on a third-party cloud storage service (like Amazon s3 or Microsoft Azure Storage). It then links those attachments to an Active Record object.

Active Storage isn’t just useful for storing images — it can also generate image representations for non-image uploads, such as videos or PDFs. By combining it with ImageMagick, you can even manipulate image uploads. For now, I just want users to upload a profile picture when they register, and for my app to store that picture locally.

## Setting up Active Storage

To begin implementing Active Storage, I opened up the Rails dating application I had already created. Then, I ran rails active_storage:install. This created a migration file that set up two tables, active_storage_attachments and active_storage_blobs.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29mb2gm7gbw4otlp57w7.png)

Active Storage stores information about each file — such as filename, size, and metadata — in active_storage_blobs. active_storage_attachments is a join table that connects those blobs to a model (in this case, my user model). Active Storage’s polymorphic associations spare me from having to add columns to the models I already created. I used rails db:migrate to run this migration.

## Adding Active Storage To A Model

To add an Active Storage association to a model, I added has_one_attached:profile_pic to my user.rb model. If I was storing multiple user images, I would’ve used has_many_attached:image alternatively.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6hoyj6ts6qf3fiieq57.png)

Now in user registration_controller.rb file, I added the following code to update method


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx150uze075enmzlta20.png)

## Configuring Active Storage

Next, I had to indicate where images would be stored. If I was using Amazon s3 or Google Cloud, this is where I’d declare those services. I chose to store my files locally so in config/storage.yml, I added:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/113fphub9sr8nyny1xds.png)

Then, in config/environments/development.rb, I added config.active_storage.service = :local within Rails.application.configure do:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/halap68myefq8eou4hix.png)

## Allowing Users To Upload On The Front-End

Finally, I added a file upload field to my pre-existing user registration form. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfwqo2fjv5agaf2f1rfc.png)

I added a new f.label and f.file_field for :profile_pic, which inserted a “Choose File” button within the form. Clicking “Choose File” opens a Finder/File Explorer window where the user can select a profile image on their device.

## Displaying User Images

Once the user successfully upload the profile picture, I would display the image as shown below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrh0w9v3kerljug9hzju.png)