Say No To Milk, But Yes To Rails

Hey, I know it has been a while, but I thought I’d post a useful snippet I wrote for use in rails.

When you load a page with a form, you have to stop to think about adding in an onload event that will select the first field. Should I do it inline because then as soon as the form is loaded I have the first field selected and any images that are slow-loaded won’t ruin my user experience? Do I just do it onload and trust that my users have fast enough connections? OR DO I DO THIS!?!?!?

document.observe('dom:loaded', function() {
  if (form=$$('form.set-focus')[0]) {
    form.focusFirstElement()
  }
});

Just load that in your application.js, and you’re great!

“But oh no!” they will say, “if I have any images then this will ruin the user experience when load-times are long!” Lets lay this to rest with a quote from the prototype api:

One really useful event generated by Prototype that you might want to observe on the document is “dom:loaded”. On supporting browsers it fires on DOMContentLoaded and on unsupporting browsers it simulates it using smart workarounds. If you used window.onload before you might want to switch to dom:loaded because it will fire immediately after the HTML document is fully loaded, but before images on the page are fully loaded. The load event on window only fires after all page images are loaded, making it unsuitable for some initialization purposes like hiding page elements (so they can be shown later).

Edit: Now searches for the first form on the page with a ’set-focus’ class, and sets focus to the first field. This is to prevent the page from scrolling if the first form on the page is past bottom of the window. The first implementation was pretty naive, but this is pretty solid.

The one thing lacking from “attachment_fu” is fantastic documentation, so I wrote up this little document for Rick Olson, the author of “attachment_fu”, which he will be including as the README file in the future. Any suggestions/additions are appreciated.

You can download it here: attachment_fu.txt

attachment_fu is a plugin by Rick Olson (aka technoweenie ) and is the successor to acts_as_attachment.  To get a basic run-through of its capabilities, check out Mike Clark’s tutorial .

attachment_fu functionality
===========================

attachment_fu facilitates file uploads in Ruby on Rails.  There are a few storage options for the actual file data, but the plugin always at a minimum stores metadata for each file in the database.

There are three storage options for files uploaded through attachment_fu:
  File system
  Database file
  Amazon S3

Each method of storage many options associated with it that will be covered in the following section.  Something to note, however, is that the Amazon S3 storage requires you to modify config/amazon_s3.yml and the Database file storage requires an extra table.

attachment_fu models
====================

For all three of these storage options a table of metadata is required.  This table will contain information about the file (hence the ‘meta’) and its location.  This table has no restrictions on naming, unlike the extra table required for database storage, which must have a table name of db_files (and by convention a model of DbFile).

In the model there are two methods made available by this plugins: has_attachment and validates_as_attachment.

has_attachment(options = {})
  This method accepts the options in a hash:
    :content_type     # Allowed content types.
                      # Allows all by default.  Use :image to allow all standard image types.
    :min_size         # Minimum size allowed.
                      # 1 byte is the default.
    :max_size         # Maximum size allowed.
                      # 1.megabyte is the default.
    :size             # Range of sizes allowed.
                      # (1..1.megabyte) is the default.  This overrides the :min_size and :max_size options.
    :resize_to        # Used by RMagick to resize images.
                      # Pass either an array of width/height, or a geometry string.
    :thumbnails       # Specifies a set of thumbnails to generate.
                      # This accepts a hash of filename suffixes and RMagick resizing options.
                      # This option need only be included if you want thumbnailing.
    :thumbnail_class  # Set which model class to use for thumbnails.
                      # This current attachment class is used by default.
    :path_prefix      # path to store the uploaded files.
                      # Uses public/#{table_name} by default for the filesystem, and just #{table_name} for the S3 backend.
                      # Setting this sets the :storage to :file_system.
    :storage          # Specifies the storage system to use..
                      # Defaults to :db_file.  Options are :file_system, :db_file, and :s3.
    :processor        # Sets the image processor to use for resizing of the attached image.
                      # Options include ImageScience, Rmagick, and MiniMagick.  Default is whatever is installed.

  Examples:
    has_attachment :max_size => 1.kilobyte
    has_attachment :size => 1.megabyte..2.megabytes
    has_attachment :content_type => ‘application/pdf’
    has_attachment :content_type => [’application/pdf’, ‘application/msword’, ‘text/plain’]
    has_attachment :content_type => :image, :resize_to => [50,50]
    has_attachment :content_type => [’application/pdf’, :image], :resize_to => ‘x50′
    has_attachment :thumbnails => { :thumb => [50, 50], :geometry => ‘x50′ }
    has_attachment :storage => :file_system, :path_prefix => ‘public/files’
    has_attachment :storage => :file_system, :path_prefix => ‘public/files’,
                   :content_type => :image, :resize_to => [50,50]
    has_attachment :storage => :file_system, :path_prefix => ‘public/files’,
                   :thumbnails => { :thumb => [50, 50], :geometry => ‘x50′ }
    has_attachment :storage => :s3

validates_as_attachment
  This method prevents files outside of the valid range (:min_size to :max_size, or the :size range) from being saved.  It does not however, halt the upload of such files.  They will be uploaded into memory regardless of size before validation.

  Example:
    validates_as_attachment

attachment_fu migrations
========================

Fields for attachment_fu metadata tables…
  in general:
    size,         :integer  # file size in bytes
    content_type, :string   # mime type, ex: application/mp3
    filename,     :string   # sanitized filename
  that reference images:
    height,       :integer  # in pixels
    width,        :integer  # in pixels
  that reference images that will be thumbnailed:
    parent_id,    :integer  # id of parent image (on the same table, a self-referencing foreign-key).
                            # Only populated if the current object is a thumbnail.
    thumbnail,    :string   # the ‘type’ of thumbnail this attachment record describes.
                            # Only populated if the current object is a thumbnail.
                            # Usage:
                            # [ In Model ‘Avatar’ ]
                            #   has_attachment :content_type => :image,
                            #                  :storage => :file_system,
                            #                  :max_size => 500.kilobytes,
                            #                  :resize_to => ‘320×200>’,
                            #                  :thumbnails => { :small => ‘10×10>’,
                            #                                   :thumb => ‘100×100>’ }
                            # [ Elsewhere ]
                            # @user.avatar.thumbnails.first.thumbnail #=> ’small’
  that reference files stored in the database (:db_file):
    db_file_id,   :integer  # id of the file in the database (foreign key)

Field for attachment_fu db_files table:
  data, :binary # binary file data, for use in database file storage

attachment_fu views
===================

There are two main views tasks that will be directly affected by attachment_fu: upload forms and displaying uploaded images.

There are two parts of the upload form that differ from typical usage.
  1. Include ‘:multipart => true’ in the html options of the form_for tag.
    Example:
      <% form_for(:attachment_metadata, :url => { :action => “create” }, :html => { :multipart => true }) do |form| %>

  2. Use the file_field helper with :uploaded_data as the field name.
    Example:
      <%= form.file_field :uploaded_data %>

Displaying uploaded images is made easy by the public_filename method of the ActiveRecord attachment objects using file system and s3 storage.

public_filename(thumbnail = nil)
  Returns the public path to the file.  If a thumbnail prefix is specified it will return the public file path to the corresponding thumbnail.
  Examples:
    attachment_obj.public_filename          #=> /attachments/2/file.jpg
    attachment_obj.public_filename(:thumb)  #=> /attachments/2/file_thumb.jpg
    attachment_obj.public_filename(:small)  #=> /attachments/2/file_small.jpg

When serving files from database storage, doing more than simply downloading the file is beyond the scope of this document.

attachment_fu controllers
=========================

There are two considerations to take into account when using attachment_fu in controllers.

The first is when the files have no publicly accessible path and need to be downloaded through an action.

Example:
  def readme
    send_file ‘/path/to/readme.txt’, :type => ‘plain/text’, :disposition => ‘inline’
  end

See the possible values for send_file for reference.

The second is when saving the file when submitted from a form.
Example in view:
 <%= form.file_field :attachable, :uploaded_data %>

Example in controller:
  def create
    @attachable_file = AttachmentMetadataModel.new(params[:attachable])
    if @attachable_file.save
      flash[:notice] = ‘Attachment was successfully created.’
      redirect_to attachable_url(@attachable_file)
    else
      render :action => :new
    end
  end