DaveSouth.org

Email RSS Twitter Delicious

Multiple uploads using Rails, SWFUpload and AttachmentFu

UPDATE: August 27, 2010. The SWFUpload.org website is clearly hacked and displaying spam entries all down the home page. The last beta was months ago with no apparent progress since then. Some users report being unable to upload files any more. I cannot recommend the project any more. We are evaluating uploadify and plupload. Also, we no longer use AttachmentFu for new projects. I highly recommend Carrierwave or Paperclip.

SWFUpload

SWFUpload is a fantastic application which makes short work of a hard problem — how to upload multiple files to a website. Most solutions using Ruby on Rails revolve around multiple fields and complex ajax calls to monitor the upload progress. These are all hard to implement because they lack compatibility across browsers, require difficult server set up, and usually fail to update quick enough to give real upload progress feedback to the user.

SWFUpload elegantly solves this problem by using a hidden Flash movie, clever Javascript callbacks, and CSS. It is cross-platform (Mac, Linux or Windows) and cross-browser (Safari, Firefox, IE) compatible.

For example, the process for a photograph website works something like this:

  1. The user clicks an “Upload photos” button.
  2. Instead of the standard browser “open file” dialog, a javascript call initiates the hidden flash movie’s “open file” dialog.
  3. The user can shift- or control-click one or more files to upload.
  4. The flash movie receives the file list and initiates a javascript call.
  5. Javascript POSTs the first filename to the server, just like a standard HTML form would do.
  6. The server begins receiving the file.
  7. The flash movie watches the upload, sending periodic javascript calls which can be turned into a dynamic upload progress bar. Because it is a client-side progress indicator, it is accurate and updated frequently.
  8. The server reports a successful upload.
  9. The javascript runner pulls another filename from the flash queue and initiates the next upload.
  10. The process repeats until the last file is uploaded.

From the server’s point of view, it’s the same as a user uploading one file at a time — greatly simplifying server set up.

AttachmentFu

Rick Olsen programmed the best attachment plugin for Ruby on Rails — attachment_fu. It manages the server side upload process, storage, and retrieval of almost any attachment. For photographs it manages resizing and thumbnails, too. Storage options include saving to the filesystem, saving attachments into the database, or saving onto the Amazon S3 storage network.

Mike Clark of The Pragmatic Studio has written a great tutorial for attachment_fu.

Put it all together

To combine SWFUpload and attachment_fu is to use the best of both worlds — a powerful client (swfupload) and server (attachment_fu) upload process. After a lot of research, I put together a sample application that combines Ruby on Rails, AttachmentFu, and SWFUpload.

This application is based on the PHP application demo included in the SWFUpload demos.

This is a simple demonstration of how all these components can work together. Go through the code, pull it apart, read the SWFUpload documentation. Then adapt it for your own use.

Download

The public repository for rails-swfupload is on github. To clone the repository: git clone git://github.com/davidsouth/rails-swfupload.git

Contact

If you have any suggestions, tips, bugs please email dave dot south at neotribune.com.

Requirements

  1. Ruby on Rails 2.1.0
  2. Freeimage
  3. Ruby gem image_science
  4. SQLite3 or MySQL

Included in this application:

  1. SWFUpload 2.1.0
  2. attachment_fu (7 Jun 2008)
  3. mimetype-fu (7 Jun 2008)

Mimetype-fu

Flash sets the mimetype for each file to application/octet-stream. Attachment_fu requires the mimetype to be set correctly before it will accept the files. Matt Aimonetti wrote mimetype-fu to help attachment_fu properly set the mimetype.

attachment_fu_hack

Using an evil twin plugin, I overrode several standard AttachmentFu methods.

  1. Uploads through SWFUpload will automatically detect mimetype.
  2. Transliterated uploaded filenames have extra underscores removed and the whole filename is downcased.
  3. When running tests a temporary directory is used rather than the public/photos directory

Functional Test

I added two functional tests for the photos controller. It tests both create and swfupload. Since each time the test is run, it adds a file to the temporary directory, the same test will destroy the photo as well.

Leopard Tips

To upgrade Mac OS X 10.5 (Leopard) to the latest version of Rails, first upgrade ruby gems (sudo gem update —system) then update Rails itself (sudo gem update). To install FreeImage and image_science, I suggest installing Macports and then using port to install FreeImage (port install freeimage). Use gems to install image_science (sudo gem install image_science).

Remember to install XCode tools (on Leopard install disk) before you can use Macports.

You can change the photo model to use mini_magick or RMagick in combination with ImageMagick. However, in my tests, I’ve found FreeImage/image_science to be much faster than ImageMagick/mini_magick.

Links

Useful links and related information found while researching this project: