Month: January 2013

Paperclip is an easy file attachment library for Rails Applications. Attached files are saved to the file system, database or cloud and referenced in the browser by an easily understandable specification.

Here is an example to explain the image attachment for a user profile in an application. This example narrates about saving the image in the file system. However, the images can be saved in S3 bucket [Amazon Simple Storage Service, S3] or database.

Step#1

ImageMagick must be installed in the system and Paperclip must have access to it. ImageMagick is a software suite to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats. You can download it by visiting the following URL:

http://www.imagemagick.org/script/index.php

Step#2
Include the paperclip gem in your Gemfile

gem "paperclip"

Then run the bundler to install the gem

bundle install

Step#3
Add the fields for the image processing as below in your migration file

class CreateUsers < ActiveRecord::Migration
def change
create_table :users do |t|
t.string :name
t.string :photo_file_name
t.string :photo_content_type
t.string :photo_file_size
t.timestamps
end
end
end

Then run your migration files

rake db:migrate

Step#4

Modify the user model for cropping and save image in your system folder

has_attached_file :photo, :styles => { :small => "150x150>" },
:url => "/system/:attachment/:id/:style/:basename.:extension",
:path => ":rails_root/public/system/:attachment/:id/:style/:basename.:ex

Here you can specify the file path and the image size as per the requirement.

Step#5
Modify your view file to upload an image

<pre class="plain plain">&lt;%= form_for :user,:url =&gt; {:action =&gt; "create"}, :html =&gt; { :multipart =&gt; true } do |f| %&gt;
&lt;%= f.file_field :photo %&gt;
&lt;% end %&gt;</pre>

Step#6
Write the following code to display the image of a user

<%= image_tag @user.photo.url (:small)%>

Please stay connected with us by subscribing our email.
Also feel free to share your opinions in the comments section below: