Storing and Displaying Files with Rails Active Storage

Active storage is a handy feature provided to us by rails that allows you to easily store user file uploads in a cloud storage application (like iCloud or Amazon S3) and relate these uploads to the appropriate model instance.

It does this by generating two tables for you — the first, called ‘active_storage_blobs’ is the table that all the file information is stored in. The second, ‘active_storage_attachments’ is the join table that stores the relationship between your model instances and the appropriate file upload. Handy!

Setup Checklist

  1. Install and run migrations

Install and Run Migrations

In your terminal, in your rails project folder run:

rails active_storage: install

rails db:migrate

This generates the Active Storage database and tables for you (check it out in your schema file!) and runs the migration. (*note: if your migration doesn’t run, try adding require “active_storage/engine” to your config/application.rb file).

For reference, below is what the schema file looks like for this example application. The first three tables were generated automatically by Active Storage. The last table represents Users, and has a ‘photo’ attribute that will be tied to the Active Storage tables to store user photo uploads.

The schema for the two active storage tables that were automatically generated^
Users table Schema ^

Specify Storage Service

Next, you can specify what cloud storage service you would like to use for your application by specifying that in your config/storage.yml folder (visit https://edgeguides.rubyonrails.org/active_storage_overview.html for instructions on how to set that up). For now, we are going to take advantage of the :local feature, which allows us to store the files on our local server during development. So, no need to specify the storage service for now as it is preset to :local.

Add Macros to Model

To relate the appropriate model attribute to the files that the Active Storage tables will be storing for you, you need to add the ‘has_one_attached’ or ‘has_many_attached’ macros provided by Active Storage to your Model code, followed by the attribute you want the file(s) to called with. For this example, our User has a name and photo attribute. The photo attribute for a User instance should reference a photo stored in the Active Storage table for that specific instance. (*note: when adding this attribute to your Model you can name this attribute anything you would like, i.e. :avatar, :profile_pic, :user_files, etc. BUT the data type must be a string!)(**double note! This means that you DON’T need to create a separate model for ‘photo’. Active Storage methods give you access to calling things like ‘user.first.photo’ now.)

To associate multiple images with a user, simply change the model code to this:

*note: for ‘has_many’ to work, the attribute in your model and schema will need to be adjusted to be PLURAL as well. Run rails g migration Change_Photo_Column_In_Users photos.

Building Forms With Active Storage

Here is an example of a simple new user form. Using the form_for ‘file_field’ enables your user to select and upload a file of their choosing, and then associates that file with the new @user instance when the form is submitted.

The new user form will look like this to our site user.

Displaying Files

Finally, you can build out your show page! To reference the photo attribute of a specific instance, simply use the syntax “photo_tag @user.photo”.

For this site, after the the New User form is submitted the site user is redirected to show page for that new @user instance. The code for that show page is as follows:

views/users/show.html.erb

…and it looks like this!

^^best gurl in the whole wide world!!^^

From connecting your user files to a variety of cloud storage options, to displaying user file previews in eye-catching ways to providing you with an environment during development, Active Storage is a great tool to use for your Ruby Rails applications that provides you with nifty front and back-end features!

Resources/Sources

https://edgeguides.rubyonrails.org/active_storage_overview.html

https://evilmartians.com/chronicles/rails-5-2-active-storage-and-beyond

link:https://www.youtube.com/watch?v=jtKEP_lsLco&t=607s