Progress bar for a form containing a file

rubyonrails-talk
1

Hi,

I have a form that contains a file field.

Since the file can be rather big, I would like to display a progress bar after the user clicks the submit button on the page, so he can see the progress of the upload.

I've no idea how to do that, so I search on Google but lots of plugins seem very old (so maybe irrelevant with Rails 2.3.5 that I'm using in this project), some other are not very clear to me. Some use AJAX, some use a combinaison of Flash and JS. I would like something easy to use. It doesn't have to be sexy.

Could someone help ?

This project is under Rails 2.3.5 and Ruby 1.8.6, and I use prototype as a JS lib. I can Flash with no problem if needed. I just want something very basic (even just displaying a text 0% to 100% would be ok), light and simple to use.

Thanks Lily

2

in FF 3.6 it's more or less easy. Search for "firefox drag drop file upload"

3

Fernando Perez wrote:

in FF 3.6 it's more or less easy. Search for "firefox drag drop file upload"

Thanks for your reply.

Well, in the best world, customers would all use FF (and linux and ogg format :p).

Of course, most of them prefer Internet Explorer :S

In any case, I need solutions that work with all browsers. Do you have any other idea ?

4

I dont think there's any quick and easy solutions to this. The solution is going to depend on what web server you use. If you use Phusion Passenger, one solution is presented here: http://railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html

5

Lily :slight_smile: wrote:

Hi,

I have a form that contains a file field.

Since the file can be rather big, I would like to display a progress bar after the user clicks the submit button on the page, so he can see the progress of the upload.

I've no idea how to do that, so I search on Google but lots of plugins seem very old (so maybe irrelevant with Rails 2.3.5 that I'm using in this project), some other are not very clear to me. Some use AJAX, some use a combinaison of Flash and JS. I would like something easy to use. It doesn't have to be sexy.

Could someone help ?

This project is under Rails 2.3.5 and Ruby 1.8.6, and I use prototype as a JS lib. I can Flash with no problem if needed. I just want something very basic (even just displaying a text 0% to 100% would be ok), light and simple to use.

Thanks Lily

Ideally and initially, you need to determine the file size. The rest will involve a lot of server-side issues. It probably can be done with Flash so if you're confident enough with it, I'd investigate that. You need to determine which web server you're using to find the simplest solution for your problem.

6

Hi,

Thank you for your answers.

So, I asked my web hosting service and they told me they are using Apache with Rails in FastCGI. As a customer I have no access to their configuration files, thought it seems the guy I'm talking to could help if some modifications in these files were absolutely necessary. Since I won't have access to this conf file, it's not really convenient.

Deadorbit: 1) Most files should be < 100kB. But it can also be a video (in flv format). So the file size could just increase up to... I don't know, probably 20Mo (current tests gives 10Mo for a rather long video). 2) I have no problem using Flash. I'm actually a Flash developper who tries to become a RoR dev too :slight_smile: I just want this progress bar to be compatible with most browsers (so Flash sounds good for that).

I didn't expect this to be such an issue :S

Pale Horse wrote:

7

Lily,

Heres a link to a reference I used last year. http://www.railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html

You will need root access to your server to install the http://github.com/drogus/apache-upload-progress-module/commits/0.1

The tutorial implements the JS with Prototype. I redid my version in jQuery with great results. The crux of the project is really the Apache module. You can take the JSON poll results and use the data anyway you need on the front end.

Good luck. Elliott