ActiveStorage and Audio

4 min readJul 10, 2018

My second project assignment at the Flatiron School Web-Dev immersive was to create a functioning Ruby on Rails application. For my team’s app, we decided to create a music sharing website focused on allowing music makers to give and receive feedback on songs.

As a function of our app, we decided it was necessary to upload audio files to the database so that other users could hear our music and post feedback on it.

Enter the glory of ActiveStorage, a built in tool in Rails 5.2 that automatically stores file attachments and relates them to your models for you!

That’s right, people. ActiveStorage automatically creates a new table for storing your attachments of any file type, and a join table that relates each attachment to the model of your choice. Here’s how to set it up:

First off, in order to use ActiveStorage, you need to use Rails version 5.2. Be sure to update to this version before proceeding.

After updating Rails, we install ActiveStorage…

This will automatically create a migration file in our db/migrate folder with the two tables ActiveStorage needs to store our files.

Here we can see we have:

An ActiveStorageBlobs table, which stores all of the necessary information about our file.

An ActiveStorageAttachments join table that automatically associates our file with the model of our choice using ActiveStorage magic.

We can simply call rails db:migrate to add these tables to our database.

Next, we’ve got to check a few files in our config folder.

First we make sure we are storing files locally inside of the file config/environments/development.rb:

As this is Rails default setting, you should not have to alter the file unless you want to store files on an external storage service (Amazon S3 etc.). Be warned, this is MUCH more difficult than storing files locally, but of course is necessary if you’re trying to create a functioning Web App for the public.

For now, we’ll stick with local storage so that we can focus on the functionality of accessing files stored with ActiveStorage.

Now let’s check the local storage settings in config/storage.yml:

This is also a default setting, so you should see it upon opening the file.

And now for the simple beauty of ActiveStorage magic.

In my example app, each instance of the Song class will have one audio file that the user can save to the database. So all we have to do is assign a symbol for our file in the Song model…

Now we can use this symbol inside of our songs/new.html.erb view file…

Here we use a file field inside of a form, which allows the user to upload a file from their device which will then be associated with the :song_file symbol and thus saved to our ActiveStorageBlobs table.

Here’s what our form looks like:

To allow the file to be submitted to our database, we’ve also got to add the song_file symbol to our strong params for our create method in the Songs Controller…

After the user submits their audio file with the form, we want to be able to play back the song from its show page. This requires a little bit of Javascript.

We’re going to use a simple HTML5 audio player to play our file, this requires the Javascript library jQuery, so we add the following to our layout/application.html.erb file…

<%= javascript_include_tag “https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>