I've been slowly working on a webapp that I am itching to release. Not going to go into it too much yet, but I will be putting up a private beta signup page soon and slowly release some people into the application to break it in a whole bunch of ways for me to fix.

One of the things I had to build for the application is the concept of users. User models, being able to register, log in, etc. And for that I use Devise, I really suggest you try it. However, one of the things that I wanted to add for my (future) users is the ability to have profile pictures. So naturally, after researching on StackOverflow for gems to handle what I want, I decided to run with Paperclip by Thoughtbot.

I am going to detail below the steps I took to get it all working. While they weren't difficult at all, took me about 30 minutes, there were a few gaps in what documentation I could find regarding the two gems' integration and so I hope this also will help someone else!

Disclaimer: I kind of just hack things together a lot of times, if I didn't do it the correct way, please let me know, I will modify my post and give you credit of course. I also stole a lot of the steps from Paperclip's README.

Prerequisites: Ruby (>= 1.9.2), Rails (>= 3.0), Devise

Install ImageMagick and Paperclip

First, you need to install ImageMagick. Run the following with HomeBrew:

   brew install imagemagick

Next, you need to install Paperclip. To do so, simply add the following into your Gemfile:

 gem "paperclip", "~> 4.1"

and then run bundle install. Next I followed the quick start directions for Rails 4 given in the README for Paperclip. They were very useful, but as I started to integrate with Devise, I had to make a few modifications. Below were the steps I took to get Paperclip working with Devise in my application.

Modify Your User Model

After installing everything I had to add the following into my User model:

 class User < ActiveRecord::Base
        has_attached_file :avatar, :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/default_image.png"
        validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
    end

Update Your Schema

Next I ran the following command in the command line: rails generate paperclip user avatar

The migration created adds columns to the user table to store the avatar information, so be sure to also run rake:db migrate.

Modify Your Views

Then I went into the view that Devise created for me at app/views/devise/registrations/edit.html.erb and added:

<div>
    Add Your <%= f.label :avatar %>:
    <%= f.file_field :avatar %>
</div>

What that does is create a file upload form element in the user account edit page. The above code can also be added anywhere you need an avatar upload.

Configure Permitted Parameters

After that, be sure to add :avatar into the following function (as seen here):

 def configure_permitted_parameters
        devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:username, :email, :password) }
        devise_parameter_sanitizer.for(:sign_in) { |u| u.permit(:login, :password, :remember_me) }
        devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:username, :email, :full_name, :description, :password, :current_password, :password_confirmation, :avatar) }
    end

That's it.

Everything else should just work out of the box.

Tweet me at @jeffchen330 or comment below if you have questions, concerns, or just want to point out that I'm plain wrong. Also, feel free check out my Github.