One of the main features in the Todobebe web sites is photo uploads. We have already improved the process a few times(refactoring FTW) and in this post I selected some recipes based in our experience:

• asynchronous upload to s3
• delaying the thumbnail generation
• anonymous photos
• saving photo dimensions

If you are using paperclip, some of the following recipes may be useful for you.

About Paperclip and Installation

Paperclip is a file upload plugin for Rails created by the thoughtbot (same guys who created shoulda and factory_girl). Paperclip is very active in github. Let it be known that it is the forth or fifth file upload plugin that I’ve already used and the best one so far IMHO.

Its installation is simple. In your config/environment.rb, add:

config.gem 'paperclip', :source => 'http://gemcutter.org'

Those using old paperclip versions may not have noticed it can be installed as a gem now (what is recommended by its developers).

Basic usage

If you just want to save a file in the file system:

class User < ActiveRecord::Base
    has_attached_file :avatar, :styles => { :medium => "120x120>", :thumb => "80x80>" }
 end

and for s3 storage (with a thumbnail):

class User < ActiveRecord::Base
  has_attached_file :avatar, :storage => :s3,
    :styles => { :medium => "120x120>", :thumb => "80x80>" },
    :s3_credentials => "#{RAILS_ROOT}/config/amazon_s3.yml",
    :bucket => "papertest",
    :path => ":class/:id/:basename_:style.:extension"
end

That’s it! If you need to improve the users’ experience and don’t want make them wait for: (1)the thumbnail generation and (2)the upload to s3 after they already have waited (3)the upload to your server, a bit more code will be necessary.

Asynchronous upload to s3

This recipe uses the gem delayed_job which can be easily replaced by other background job solution such as workling or a rake task + a cron job. If you don’t know delayed_job, there is a nice railscast about it. Assuming you have delayed_job installed, let’s start our example:

class User < ActiveRecord::Base
    has_attached_file :local_avatar, :styles => { :medium => "120x120>", :thumb => "80x80>" }
    has_attached_file :remote_avatar, :storage => :s3,
      :styles => { :medium => "120x120>", :thumb => "80x80>" },
      :s3_credentials => "#{RAILS_ROOT}/config/amazon_s3.yml",
      :bucket => "papertest",
      :path => ":class/:id/:basename_:style.:extension"
 end

The basic idea is to upload to the filesystem(local_avatar) and in background to upload to s3(remote_avatar). In the form there will be something like this:

<%= f.file_field :local_avatar %>

Nothing new so far. Now we’ll use a ActiveRecord callback to schedule the upload to s3:

after_save :queue_upload_to_s3
def queue_upload_to_s3
  send_later(:upload_to_s3) if self.local_avatar_updated_at_changed?
end
def upload_to_s3
  self.remote_avatar = local_avatar.to_file
  self.save!
end

And if you don’t want to keep a local copy, just change this method:

def upload_to_s3
  self.remote_avatar = local_avatar.to_file
  self.local_avatar = nil
  self.save!
end

Another tip it’s to create an alias to forget that you are working with two attachments:

alias_method :avatar=, :local_avatar=
def avatar
  self.remote_avatar? ? self.remote_avatar : self.local_avatar
end

In the views you will do:

<%= f.file_field :avatar %>

<%= image_tag @user.avatar.url(:thumb) %>

I really like this solution because it’s simple and non intrusive.
Alternatives:

• Delayed upload delivery to S3 with Paperclip + Delayed::Job(1 table, 2 models, temporary local files. nice solution)
• Uploading files directly to Amazon S3 using FancyUpload

Delaying the thumbnail generation

For this one I’ve made a mix of two solutions that I found:

• Delaying Paperclip(broken link)
• Paperclip, S3 & Delayed Job in Rails

First of all, it’s necessary to add a column (processsing, for instance) to flag that the thumbnail isn’t ready. Once you’ve done that, we have to prevent the thumbnail generation.

before_local_avatar_post_process do |image|
  if image.dirty?
    image.processing = true
    false # halts processing
   end
end

That will prevent any image processing by paperclip. Now we just need to implement a method to let the paperclip to do it and put on background, in this recipe using the delayed_job:

after_save :queue_process_styles

def queue_process_styles
  send_later(:process_styles) if self.local_avatar.dirty?
end

def process_styles
  self.local_avatar.reprocess!
  self.processing = false
  self.save(false)
end

And for placeholder image to show the thumbnails during the processing, just use the option default_url:

has_attached_file :local_avatar, :styles => { :medium => "120x120>", :thumb => "80x80>" },
  :default_url =>  ":class/:attachment/:style/processing.png"

Alternative:

• delayed_paperclip

Anonymous photos

To implement it, we have to customize the file path using the options path and url:

has_attached_file :local_avatar,
  :url => "/system/:attachment/:id/:style/:filename",
  :path => ":rails_root/public:url"

The value of each of those words beginning with : is determined by a method of the Paperclip::Interpolations. The :attachment, for instance, returns the pluralized name of the attachment as given to has_attached_file. To create one is very simple:

Paperclip.interpolates :anonymous do |attachment, style|
  Digest::SHA1.hexdigest("#{attachment.instance.id}")
end

Back to our example:

has_attached_file :local_avatar,
  :url => "/system/:attachment/:id/:style/:anonymous.:extension",
  :path => ":rails_root/public:url"
#example:
#/system/local_avatars/12/original/7b52009b64fd0a2a49e6d8a939753077792b0554.jpg

I don’t know if SHA-1 is the best way to do it and I would like to receive suggestions to improve this code.

Alternatives:

• :id
• :id_partition
• :timestamp
• an interpolation created by you

Photo dimensions

The class Paperclip::Geometry has methods to get the image dimensions. We just need to add the columns(width and height, for instance) and set their values using an appropriate callback:

before_save :set_dimensions

def set_dimensions
  tempfile = self.local_avatar.queued_for_write[:original]
  
  unless tempfile.nil?
    dimensions = Paperclip::Geometry.from_file(tempfile)
    self.width = dimensions.width
    self.height = dimensions.height
  end
end

That’s it!

Uploaded successfully!

I wanted to share the above recipes as I figure they are useful to those working in similar projects. I’d like to thank those who have worked on the projects mentioned above: Christopher Saylor, Bruno Miranda and Dante Regis.
Thank you for reading!

Photo by williac