Rails – File Upload with Paperclip

Paperclip helps you implementing file attachment with ActiveRecord with Rails. Follow the example below and see how it works.

1. Install ImageMagick (ImageMagick – Manipulate Image File by Shell Commands)

  • apt-get install imagemagick


2. Create a Image Model with the required Paperclip fields

  • rails generate model Image image_file_name:string image_content_type:string image_file_size:integer image_updated_at:datetime

2. Edit the app/models/image.rb and specify has_attached_file attribute

class Image < ActiveRecord::Base
  has_attached_file :image,
                    :styles => { :medium => "300x300>",
                                 :thumb  => "100x100>" }

The :medium and :thumb are the display styles which is shown the image in views.

3. Create the Images controller

  • rails generate controller Images


4. Edit the app/controllers/images_controller.rb as follow

class ImagesController < ApplicationController

  def index
    @images = Image.all

  def show
    @image = Image.find(params[:id])

  def new
    @image = Image.new

  def create
    @image = Image.new(params[:image])
    if @image.save
      redirect_to @image
      redirect_to images_path

  def edit
    @image = Image.find(params[:id])

  def update
    @image = Image.find(params[:id])
    if @image.update_attributes(params[:image])
      redirect_to @image


5. Create the following views

<% @images.each do |x| %>
  <p><%= image_tag x.image.url(:thumb) %></p>
<% end %>


app/views/images/new.html.erb, app/views/images/edit.html.erb

<%= form_for(@image, :html => { :multipart => true }) do |f| %>
  <div class="field">
    <%= f.file_field :image %>
  <div class="actions">
    <%= f.submit "Create" %>
<% end %>



<%= image_tag @image.image.url %>
<%= image_tag @image.image.url(:medium) %>
<%= image_tag @image.image.url(:thumb) %>
<%= debug @image %>


6. Add the route mapping in config/routes

resources :images


7. Specify the path of the ImageMagick convert command in config/environments/development.rb. You can check the path by which convert.

  # ImageMagick path for Paperclip
  Paperclip.options[:command_path] = "/usr/bin/"


8. Start your Rails application and try to upload the image @ http://<server&gt;:3000/images/new


9. You can access the image by http://<server&gt;:3000/images/<id> and edit it by http://<server&gt;:3000/images/<id>/edit.


10. See all images @ http://<server&gt;:3000/images


11. The uploaded images are stored @ public/system/:attachment/:id/:style/:filename. In the above example, the :medium style of image with :id => 1 would be located @ public/system/images/1/medium

Done =)


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s