Click here to get back home

Need upload system with progress...

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Need upload system with progress... Gnarlodious 03-25-2008
Posted by Gnarlodious on March 25, 2008, 12:08 pm
Please log in for more thread options
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.

Thanks.

-- Gnarlie
http://Gnarlodious.com/

Posted by SAM on March 25, 2008, 2:53 pm
Please log in for more thread options
Gnarlodious a écrit :
> 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.

Tested locally Firefox:


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



<http://swik.net/Ajax/Ajax+Images>
<http://ajaxload.info/>
<http://swik.net/Ajax/How+to+use+XMLHttpRequest>
<http://developer.mozilla.org/en/docs/AJAX>
<http://developer.mozilla.org/fr/docs/AJAX>
and google :-)

--
sm

Posted by Andy Dingley on March 26, 2008, 8:21 am
Please log in for more thread options
> Our computer user group website needs a system for uploading large
> files in the browser with some kind of progress indicator.

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
uploads.


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
off.

Similar ThreadsPosted
Loading picture before the using java applet / progress bar or waiting message ? October 8, 2004, 12:05 am
What is upload button for Mac? February 21, 2005, 1:11 pm
how to upload files with only 1 button April 4, 2005, 6:32 am
activex upload tool February 14, 2006, 2:57 pm
File Upload variation July 29, 2005, 7:22 pm
Problem with an upload form September 27, 2006, 11:50 pm
Any ready made 'Upload' tools? July 29, 2004, 6:41 pm
Suddenly I can't Validate by File Upload August 26, 2004, 3:46 am
CMS system recommendations November 26, 2005, 10:09 pm
Validating (X)HTML with IE6 WinXP SP2 using File Upload is Now Possible September 7, 2004, 12:30 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap