Rails remotipart gem, how to bind to ajax "progress" event

Question

I'm trying to implement a progress bar based on ajax events, which I have read about in a number of sources. My particular problem is that I don't know how to bind my custom event handlers into 'remotipart' gem's ajax events.

here is a description of the kind of even hooking I want to do:

http://warp.byu.edu/site/content/1172

or

http://www.centurion-project.org/articles/html5-multiple-file-upload-with-progress-bar

the remotipart gem i mentioned:

https://github.com/JangoSteve/remotipart

I'm using rails 3, and jquery, with a :remote => true form.

Answer 1

Remotipart Might Not Be The Answer

So little disclaimer, I have not myself used Remotipart gem but I have spent a lot of time dealing with file uploads and Rails. Unfortunately based on my understanding of Remotipart it will not suport the progress-bar use case you are looking for, because progress events are not supported by the underlying iFrame Transport strategy.

To explain, let's look at the different options that are available to us as developers at the browser level. These options hold true regardless of what server side framework or libraries you are using.

Refresh-less File Uploads

1. iFrame Transport
2. Plugin Supported (Flash/Silverlight/Other)
3. HTML5 (File & XHR2 APIs, optionally Drag-n-Drop)

Option 1 - iFrame Transport (Remotipart's Strategy)

The oldest and most widely supported (in terms of browsers) strategy for refresh-less page loading essentially involves doing a standard submit of the form but using a hidden iFrame as the target. Unfortunately this option does not support progress events, See this link (from Remotipart's README):
http://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/

Option 2 - Plugin Supported

Uses an upload module (usually written in Flash or Silverlight) to get around the limitations imposed by historical browser standards. Allows for multiple file upload and progress events, but requires the user to install a 3rd party browser extension (although we can assume most desktop browsers have Flash).

Option 3 - HTML 5 (Strategy used by the articles you reference)

So as usual, HTML 5 is the answer to all life's challenges. Using the File and XHR2 APIs it is possible to support multiple-file upload with progress events without any browser extensions. This is the strategy being used by the articles you reference, and is generally the best practice looking forward, but carries the caveat that you may see a lot of users with browsers that don't support it.

What I Do

I'm a big fan of any solution that let's you leverage the latest and greatest while still degrading gracefully on older browsers. With that in mind, I use a library called Plupload for my file uploads:
http://www.plupload.com/

Plupload contains 4 upload "runtimes" bundled together in a single library:

• HTML5 (Option 3)
• Flash (Option 2)
• Silverlight (Option 2)
• HTML4 (Option 1)

You configure your order of preference and the Plupload JS runtime will intelligently load the first one supported by the users browser. The JS portion of the library does a really nice job of providing you consistent events to program against, regardless of which runtime is being used. As developers this let's us focus on building a nice UI that will "just work" regardless of which runtime is being used.

Of course if you degrade all the way to HTML4 you're going to lose the ability to get progress updates so you should be ready for that.

Hope that helps! If you're interested in using Plupload there are a lot of good articles and answers out there to help.