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>" }
end

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
  end

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

  def new
    @image = Image.new
  end

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

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

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

 

5. Create the following views
app/views/images/index.html.erb

<% @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>
  <div class="actions">
    <%= f.submit "Create" %>
  </div>
<% end %>

 

app/views/images/show.html.erb

<%= 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 =)

Reference:

• GitHub – thoughtbot / paperclip
• GitHub – thoughtbot / paperclip – Simple Example