Rails Image Upload: Using CarrierWave and Devise

In the first part of this series, you learned how to use CarrierWave in your Rails application. In this second part, you will learn how to enable image uploading for your users using Devise. Devise is an authentication solution for Rails. You will also learn how to use fog, a Ruby cloud service library that will enable your application to connect to Amazon Web Services.

Enough talk—let’s get down to business.

Rails Application Setup

Generate your new rails application:

Open up your Gemfile and add the following gems:

Run bundle install to install the gems.

From your terminal, create a Pages controller:

Navigate to config/routes.rb and add a root path:

Generate and Configure Devise

The uploading feature will be integrated into our User model for users to upload avatars. From your terminal, install devise:

The generator will install an initializer which describes all of Devise’s configuration options. Open up app/views/layouts/application.html.erb in your text editor and add the following code above the yield block:

At this point you can generate your User model:

Next, migrate your database:

You will need to edit devise views, so it is important you generate those:

And that will do the magic.

Using your text editor, open app/views/devise/registrations/new.html.erb and edit it to look like this:

Do the same for app/views/devise/registrations/edit.html.erb:

With that done, you will need to whitelist avatar for devise and add an avatar column to the User table. From your terminal, run migration to add a new avatar column.

Add the CarrierWave avatar to your User model—your model should look like this:

In the above code, you added a mount_uploader line at the top of the User class. There is also a validation to check the integrity and processing of the avatar, alongside a method to ensure that no image greater than 500KB is uploaded.

You need to add avatar, avatar_cache, and remove_avatar to the list of accessible attributes. Doing this is easy—just open up your application_controller.rb and make it look like this:

With that done, you are ready to integrate CarrierWave.

Setting Up CarrierWave

Using your text editor, navigate to config/initializers and create a file named carrier_wave.rb. Paste in the code below:

This is the initializer that is needed in loading CarrierWave after ActiveRecord.

From your terminal, generate an uploader:

This will create a new directory called uploaders in the app folder and a file inside called avatar_uploader.rb. I have edited the contents of the file to look like what I have below:

You need the MiniMagick line to generate different versions of an image. I included three versions of images. MiniMagick makes the resizing into this version possible. The last code block ensures that no file extensions aside from those listed here are uploaded.

AWS Setup

For this tutorial, we will be uploading our images to Amazon Web Services. If you do not have an account yet, hop over to the sign-up page and create a free account.

When you’ve finished with that, you will need to create a bucket to store your images. When there, choose Create Bucket to open the dialog box. Enter a name for the bucket and select a region. When done, select Create.

Open your Gemfile and add this gem, and bundle install when done.

From your terminal, run bundle exec figaro install. This will a create a new file config/application.yml and append it to your application’s .gitignore. You need this file to keep your AWS access id and secret key safe.

To find your AWS access id and secret key, go to Amazon Web Services and click on the name of your account, which is located in the right corner of the console.

From the drop-down, select Security Credentials, and click the Continue to Security Credentials button. In the page that shows, select Access Keys (Access Key ID and Secret Access Key). Click on the Create New Access Key button to generate a new key, and copy it into an editor.

In your text editor, navigate to config/application.yml and paste in the following:

Replace the lines as stated above.

Navigate to config/initializers, create a file named storage.rb, and paste in the following:

According to the above config, the region for my bucket is us-west-2, and the bucket’s name is tutsplus-avatar. Replace that with information about your bucket.

Start up your rails server and point your browser to http://localhost:3000/users/sign_up.

Setting a Default Avatar

In your application, you might want to set a default avatar for users that choose not to upload an avatar. Doing this is easy.

Create a folder in app/assets/images called fallback and drop your default image in it. Using your text editor, navigate to app/uploaders/avatar_uploader.rb and paste in the code below:

Be sure to change default-avatar.gif to the name of your image.

Conclusion

Now you know how to enable image uploading for your users. This adds an important feature to your rails application. I hope you had fun. In the next part, we will have a look at PaperClip. Your feedback is welcome.

Tags:

Comments

Related Articles