Multiple Uploads using Ruby on Rails, SWFUpload, and AttachmentFu

by David South Jr

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 at appeddesign.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:

• SWFUpload – New home of the SWFUpload project.
• Uploading Files With SWFUpload – Excellent source of information.
• Getting the _session_id from SWFUpload – The cookie plugin that comes with SWFUpload 2.0.1 may bypass the session_id problem. However, I have not had a chance to test it, yet.
• Activeupload – A non-attachment_fu solution to combine SWFUpload and Rails.
• Caboose forum posts – Read the posts from Peter De Berdt.
• Ruby forum discussion – More from Peter De Berdt.
• Flornet’s Blog – An SWFUpload 1.x Rails demo.
• Working with attachment_fu – Some attachment_fu tips.
• Evil Twin Plugins

Todo

• Implement best method of passing session data through SWFUpload.

Paperclip

There is a move in the community to use paperclip instead of attachment_fu. Both plugins have advantages and disadvantages. If you are interested in seeing an implementation of SWFUpload with Paperclip, I would try this project:

Jim Neath’s SWFUpload Paperclip Example App

Changes

Wednesday, 25 March 2009, 11:13 PM – Added link to paperclip project
Thursday, 12 February 2009, 11:31 PM – Updated to run Rails 2.2.2 and SWFUpload 2.2 Beta 5