File upload progress bar - don't switch off just yet! hehe...

Ian_Griffiths

I'd like to implement a progress bar on upload to a php script. There is the grand total of nothing on the web already and normally that would indicate that it can't be done but I'm certainly set on the idea of it working somehow.

The main issue is that the script won't finish until all data is present, therefore you bar would always display 100%. To work around this, I propose to pop open a new window or make visible an iframe that calls a second script. The second script could take a look in the upload directory and compare file size written with POST query Content-Length. Simply you say?

Issues there also; namely I don't have the content length to hand - is this available anywhere client side? Ideal if it was as then it could go on a GET query string to the second script which was doing the testing. Suppose its not, what about writing it to a file somewhere or a database table which the second script could then read? There are concurrency issues there but it'd be fairly easy to have the bar display that the information wasn't there yet, and even in the worst case, I'm prepared to assume that will take only a few seconds to resolve itself.

My fear is that the content-length is only clarified after all data has arrived, in which case, I'm stumped, am I not.

Cheers for reading

Ian

sneakyimp

having a progress window that simply specifies how many bytes uploaded would probably suffice, no? it would at least reassure the user that SOMETHING was happening.

i think it's also possible through DHTML/javascript to load additional URLS (try google for this). it therefore might be possible for a javascript timer/query sort of thing which queries a PHP page which will check on the file being uploaded.

chads2k2

Cool question! Never thought of throwing that in there. Now makes me want to learn how to do it. If anyone has any ideas besides that great one with DHTML/Javascript throw it out. Thanks!

Chad

sneakyimp

i bet you'll find this useful:

http://www-106.ibm.com/developerworks/web/library/wa-exrel/index.html

if you come up with anything, please share a bit! i'm very very interested in this too.

Brown

A progress bar ey?

Sounds quit interesting.....i will do some research and post any new developments (if any :-) I'm still learning this game)

I look forward seeing the results !

AstroTeg

Pretty simple, but worked for what we needed (although not as fancy as some of the ideas here):

User clicks submit and initiates file upload
On submit, a popup window appears with an animated GIF of a progress bar. As far as the user was concerned, it looked like something was happening - the one we made looked pretty similar to the one Win9x uses on the splash startup screen at the bottom
On the next page (the one which would handle the upload and present the user with the form submit results), the onload event would close the popup window.

We really really wanted to do this with DHTML (and we did). But when you submit a page, IE stops looping animated GIFs (which defeats the solution to the problem). The popup window was a workaround to IE.

sneakyimp

my current project does something like this...it's not the greatest thing. i have my main window. user clicks a link to add a file which launches a popup. now i have 2 windows. when they submit the form in the popup, yet another popup appears with the animated gif. 3 WINDOWS! and closing them all at the right moments is kinda like having 3 girlfriends....a bit of a pain.

i end up having a javascript function in my original window that will close the popup.

sneakyimp

another thing occurred to me....

is there anyway to know where the will be uploaded before it is fully uploaded? i'm guessing the TMP directory, but how on earth will we know what its filename is?

i've seen this work on other plaftorms....can't recall where, but there was a page that looked like javascript reporting bytes uploaded.

there has to be a way to do this other than animated gif.