What is the easiest way to get an embedded upload progress bar using Ruby/Sinatra/Haml/Passenger/nginx?

Question

I have a website where people can upload 30+mb of data in a single block, and I want to be able to show them the progress of their upload without causing the web page to become unresponsive, similar to how flash uploads work in gmail.

There's this question here, but I don't know if that progress bar is embedded in the page or if it's using the browser's progress bar. I'm also a bit of a web newb, so I'm not sure if it's the 'easiest'. I asked the swfupload guys how to do this here, and the answer I got is 'this tool requires some knowledge to use it' without giving me much help in figuring out where to get started. I also asked this question on ServerFault, and got no response, so maybe that was the wrong place to ask.

I'm all for learning new things and so forth, but there are a lot of potential pathways to take here. Where should I start, and what do I need to know to make everything work with sinatra, haml, ruby, passenger, and nginx?

Thanks!

Answer 1

AFAIK, you can't do it with pure html/javascript. You have to use some Flash or Java or whatever stuff for that. Swfupload was a good choice - it will give you what you need (I saw it working) but I can't recall details right know.

Answer 2

The simplest solution is probably Flash, but it's also the ugliest: as some people on the SWFUpload forum told you, Flash support on Linux kinda sucks, and after all, if you can, you should avoid using it.

So, the next solution is using a combination of server-side modules + Javascript on the client.

Note I have already partially answered your question on ServerFault.

For simplicity's sake, I suggest you switch to Apache or Lighttpd.

The server-side module (apache upload progress module/lighttpd mod_uploadprogress) handles the file upload, and exposes an API you can query in Javascript to get the current progress.

On the client side, you have 2 options (as shown by the File Uploader library, which you shouldn't use unless you also want to modify the server-side modules):

• newer browsers allow you to perform and monitor the upload in an AJAX call (see here)

• virtually all browser, old and new, allow you to perform the upload in a form, and monitor it via AJAX using the "IFrame trick": since a currently running file upload prevents Javascript code from running (thus forbidding you to query the server and update the progress bar), you need to include a hidden IFrame in your upload page, and set the form's action to that IFrame. That way, the Javascript code on the "main page" can execute while the upload is still in progress.

For the client-side Javascript, either you write it on your own, or you can use an existing libary (look here). Your goal is to query the server for the file's progress and display it. For nice progress bars, have a look at jqueryUI.

As a final note, you can take a look at my code, i was solving the same problem and i used Ruby/Sinatra/Haml/Passenger/Apache.

Hope that helps