Need upload system with progress...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Our computer user group website needs a system for uploading large
files in the browser with some kind of progress indicator. Either a
bar or numbers would be adequate. We just don't want uploaders to quit
the upload because they think the browser crashed.

Is there a free and open-source scripting package that will do this? I
was thinking AJAX or Flash, but I'm in unfamiliar territory.


-- Gnarlie /

Re: Need upload system with progress...

Gnarlodious a écrit :
Quoted text here. Click to load it

Tested locally Firefox:

<script type="text/javascript">
function throbber() {
return true;
function nonThrbr() {
<style type="text/css">
#div_img { position: fixed; top: 45%; left: 45%; visibility:hidden }
<form action="uploader.php" target="result"
       onsubmit="return throbber()">
Upload your file : <input type=file name="filUpLoad">
<input type=submit>
<iframe name="result" onload="nonThrbr()" width=200 height=150></iframe>
<img id="div_img"

and google :-)


Re: Need upload system with progress...

Quoted text here. Click to load it

This is _very_ difficult to do "properly". It requires AJAX and it
requires server-side code that can query the upload status of a file
transfer for another HTTP connection.

The client-side page is simple. It has a <form> to do the upload and
it has a separate <div> alongside with a piece of AJAX JavaScript
running in it, triggered when you start the upload. There's a
setTimeout() call in there, so that every "interval" (your choice for
how long, or this can even be dynamic) an AJAX request is made to the
upload server's QueryStatus service. This service request includes an
"identifier" that identifies the web session and file upload that
you're querying. Note that this must also happen when the user uploads
a file, cancels or fails part-way, then tries to re-upload with the
same name. Easy solutions to this could be to generate a GUID client-
side at upload time and submit it with the <form>.

On the server-side you need an upload processor to receive this file
which also supports querying from other HTTP requests on the server,
in an adequately secure manner. If you're a big multi-server site and
your sessions aren't sticky, then they might not even be on the same
web server! I've not seen an available file upload receiver that
supported this out of the box - you might have to add it.

When the client's AJAX call receives a response of "1234 bytes
transferred in 57 seconds", it can display this. It then re-starts the
timeout, so as to update the transfer stats a few seconds later. A
nice touch is to grey the old status out a bit (still visible, but
obvious) on making the re-request, then re-drawing it fresh when you
get the new result. Remember that nothing is guaranteed with AJJAX,
especially not these "secondary" services. A busy upload server may
well stop responding to the trivia whilst it concentrates on actual

Alternatively, and much more simply, use a Throbber. I hate these -
they lie. They don't mean anything is happening, they simply mean that
the client-side hasn't caught fire yet. Inaccurate reporting
encourages users to stop believing in it (or to keep believing in it
when they shouldn't).

SAM has posted the simplest sort of throbber - an animated .GIF.  This
is easy to do (arguably better than nothing, esp. when upload services
are actually reliable but your users are trigger-happy). However I'd
favour something based on JavaScript timeouts. This way the throbber
at least has some chance of stopping after some classes of locally
detectable errror. A .gif just sits there throbbing away even when
it's obvious to everyone that there has been a crash. Build your
throbbers to "fail safe", i.e. they always stop whenever anything
breaks, they don't (like a .gif) keep running until actively switched

Site Timeline