Uploading images with my Rails pinterest-esque site

First thing, I needed Image Magick, which I got by typing in Terminal:

$ brew install imagemagick

I already had Homebrew installed from following some other tutorial, which is why it worked so smoothly.  Next, I’m going to install the Paperclip gem, a popular gem for image uploading.  I just need to open up my gemfile and add

gem "paperclip", "~> 3.0"

in the top section. I run “bundle” in Terminal and it downloads and installs Paperclip.  The first thing to do to get started is to run the following:

$ rails generate paperclip pin image

In that command, ‘pin’ is the name of the model, and ‘image’ is what we want to call the type of file people are uploading.  When we run this, it generates a migration so we have to run rake db:migrate like usual.  Next we have to open up the pin.rb model and make a few adjustments.  Basically we need to make :image accessible, and then validate the attachment in a number of ways: presence, filetype and image size.  Here is the new code:

class Pin < ActiveRecord::Base
  attr_accessible :description, :image

  validates :description, presence: true
  validates :user_id, presence: true
  validates_attachment :image, presence: true, 
  											content_type: { content_type: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']},
  											size: { less than: 5.megabytes }

  belongs_to :user
  has_attached_file :image

Now we update the view.  This is a piece of cake.  Just add <%= f.input :image, label: “Upload an image” %> above the description in the _form.html file.  Also in this file, I need to add notifications for the other validations that we just set in the previous part. I add this under the other notification:

  <%= f.full_error :image_file_size, class: "alert alert-error" %>
  <%= f.full_error :image_content_type, class: "alert alert-error" %>

Now we have to update the show view.  Above the description I add: <%= image_tag @pin.image %>.  And we have to update the index view.  So first in the index.html we add another column header by doing      <th>Image</th>.  And then, in the _pin.html partial we put in <td><%= image_tag pin.image %></td>.  Now it works!

The problem is, the image I uploaded (of my horse Rosie) is too big.  Apparently Paperclip has image styles to help us with that.  In pin.rb model change the has_attached_file line to:

has_attached_file :image, styles: { medium: "320x240>"}

And then in my pin.html file I change the image_tag pin.image part to:

<%= image_tag pin.image(:medium) %>

Since this all happens during processing, it will only happen when the image is uploaded.  I reuploaded and now this looks awesome.  These are saved into the public folder of our application under a new folder called System.  We probably want to add this stuff into our .gitignore because we don’t want the images we’re playing around with to end up pushing live.  I opened up the .gitignore file and added this to the bottom:

#ignore paperclip uploaded files

And now, holy crap, I have a running Pinterest style website with image uploading live on Heroku!

Screen Shot 2013-04-04 at 12.45.08 AM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s