Progress bar for Webform file uploads [#1162654]

This is a small module for Drupal 7 that adds a JavaScript progress bar to Webform forms that contain file components. The module is loosely based on andyn_uk's code given here.

The module uses the core jQuery UI library to render the progress bar, so no third-party JS libraries are necessary. The progress bar also works in WebKit browsers such as Safari and Chrome which are known to have a bug that prevents a straightforward implementation.

The progress bar appears after the form submit if at least one file was selected for upload by the user. Please see the screenshot attached.

The module was developed by RockPeaks for SlaightMusic.com.

Comment	File	Size	Author
#8	Screen shot 2011-10-07 at 16.30.43.png	70.53 KB	Nico Heulsen
#8	Screen shot 2011-10-07 at 16.29.42.png	30.71 KB	Nico Heulsen
	webform_upload_progress.zip	2.34 KB	jamix
	webform_upload_progress.png	21.8 KB	jamix

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

quicksketch

he/him

CreditAttribution: quicksketch commented 19 May 2011 at 16:36

Status:

Active

» Closed (duplicate)

Drupal core has a built-in "managed_file" element that does all the work of an AJAX upload and progress bar for us. That's what is suggested in #289919: Provide AJAX-based file uploads/Progress Bar for uploads. We should use that for such functionality because it also does the work of adding a "Remove" button. I'd like to see this implementation built directly into Webform, but if you'd upload your module over there it could make for an interesting reference.

Comment #2

jamix CreditAttribution: jamix commented 23 May 2011 at 14:10

Thanks - I have attached the module to that thread.

Comment #3

niels.sterckx@gmail.com CreditAttribution: niels.sterckx@gmail.com commented 17 June 2011 at 13:41

Looks nice, but i can't get it to work , the progess bar appears, no progress is shown, after that, the form is handled, without any progress.

Does anyone know the cause of this?

Greets,
Niels

Comment #4

niels.sterckx@gmail.com CreditAttribution: niels.sterckx@gmail.com commented 20 June 2011 at 12:57

Got it to work : PECL uploadprogress has to be installed on the webserver ! :-)

Comment #5

niels.sterckx@gmail.com CreditAttribution: niels.sterckx@gmail.com commented 19 July 2011 at 13:28

Status:

Closed (duplicate)

» Active

Question: is it possible to change the color of the upload bar ? I cant find anything to change it...

Comment #6

quicksketch

he/him

CreditAttribution: quicksketch commented 19 July 2011 at 17:18

Status:

Active

» Closed (duplicate)

Webform does not have a progress bar. Most likely you're dealing with the core File module. The request for Webform adding this feature is #289919: Provide AJAX-based file uploads/Progress Bar for uploads.

Comment #7

Nico Heulsen CreditAttribution: Nico Heulsen commented 7 October 2011 at 14:30

@sterckx This propably is because you didn't have the correct version of the pecl uploadprogress. I had the same problem. Using version 1.0.1 solved the problem for me.