Resources

Transcripts

User Avatars with Rails Active Storage

In this episode I'm going to show you a quick way to add avatars to your Rails application using ActiveStorage and Devise.

We're going to start up a new Rails application using the Jumpstart template. This is going to take care of pre-installing Bootstrap and Devise for us, so we won't have to fiddle with those gems and can just focus on the avatars.

So let's start up a new rails app named, appropriately, avatars, and run the appropriate generator:

You could wrap this in Bootstrap classes if you felt so inclined for additional styling. But what we're really interested in doing is displaying either the User's avatar or a default from gravatar if the User doesn't have an avatar yet. (The Jumpstart template takes care of giving us the gravatar_image_tag gem. If you're not using the template, you'll need to install it.)

Make sure you add the avatar to the User model:

app/models/user.rb

has_one_attached:avatar

In the Application Controller, you'll want to add these lines if you don't have them. (The Jumpstart template takes care of giving them to us already.)

What this is doing is making Devise accept the name and avatar fields as valid inputs, since they aren't fields that Devise accepts out of the box.

With all of this set up, start up the Rails application, and visit the Sign Up page to create a new account to test this out.

Assuming the email address you sign up with has a gravatar image associated with it, once you are logged in you should see that image displayed as your avatar.

Visiting the account edit screen will also provide the file picker element that will allow you to upload a new Avatar to use instead of the default from gravatar.

If you don't have any avatar images handy for testing this out to see how it all works, you can visit UI Faces, which has a wide selection of avatar images available.

Now anywhere in the application where you are going to want to display the avatar is going to need code very similar to what we did in the view above. This calls for some refactoring, pulling that code out into a helper method.

If you go back to the application and reload the page we shouldn't see any changes to the application, which is a good thing.

The last thing we want to do is update our nav bar to use this new helper to display the avatar of the logged in user. Open up the navbar partial, and replace the gravatar image_tag line with:

/app/views/shared/_navbar.html.erb

<%=image_taguser_avatar(current_user,20),class:"rounded-circle"%>

Return to the application and refresh the page, and the uploaded avatar should now display in the navbar instead of the gravatar image.

Now we have working avatars that we can use anywhere in our application: gravatar by default, or the uploaded image provided by a User.

If you want to change where the images are stored you can use any of the ActiveStorage functionality to upload images to Amazon S3, DigitalOcean Spaces, Google Cloud Storage, or Azure.

By default these images will be stored to disk so keep that in mind. Storing the images to disk is generally fine for development, but in production you will want to upgrade to one of the above mentioned options.

To do that you'll need to obtain the requisite keys to configure your chosen storage option in config/storage.yml. Then you need to configure the production environment to use them:

config/environments/production.rb

Replace this:

config.active_storage.service=:local

With this (assuming your chosen image storage solution is Amazon S3)

config.active_storage.service=:amazon

With ActiveStorage, adding images to our Rails application is pretty easy. We don't have to think about changes to our database in order to add images, because ActiveStorage handles all of that for us.