File Upload Progress Bar

[Guest_imported]

Recently I made a very simple page that allows a user to upload files to our server via an HTML form. It seems to work fine.

Then I saw a site that used a similar setup, but when the user submitted the form, a progress bar popped up. It continually updated until the upload was finished. I looked at their code for awhile, but I couldn't figure out how they determined the total size of the upload before the upload had finished.

Is there a way to get the size of a file on the user's local HD with Javascript? Or does anyone have a script for this type of thing?

Thanks!

-brendan

 

[tanderso]

I'm intrigued... what site was this on?
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

 

[jaredn]

They probably used an ActiveX or Java component. Don't think you can do that from browser javascript... jared@aauser.com

 

[palbano]

> Don't think you can do that from browser javascript...

Actually you can, sort of. It would be the next or new page that displays the progress.

Your server side code that is running cannot 'block' of course. Then you start a <script> tag that manipulates the status bar and continue to write lines to the script until the server process is concluded.

Of course you have to have buffering set up correctly etc.

-pete

 

[Guest_imported]

The site was

http://www.aaaflag.com,

although it looks like they're switching hosts or something right now. It's had an Under Construction page for the last couple days. Keep an eye on it, though. It's a decent website for an electrical sign company, and I doubt they'd dump it entirely.

I was trying to think of ways to do it server side, continuously flushing the buffer or something, but the biggest problem I kept hitting was that the new page (the 'action' of the form) will not begin loading until the entire file is uploaded. The progress bar on their page popped up in a separate window, so I figured there had to be a way to grab the filesize before the form is submitted.

>Your server side code that is running cannot 'block' of course.

Forgive me for being stupid, what do you mean by block?


-brendan

 

[palbano]

brendan,

> what do you mean by block?

Say your server code uses a component to read in the file bytes and save it to disk. Then the component would have to provide an interface that would allow the script code to occasionally write data to the browser. If the component just has a single function that you call and it does not return (blocks) until it has finished saving the file then your script code never gets to update the progress bar by writing to the browser stream.

// this type of code does not block for the entire duration
// of saving the file to disk but allows your script to
// perform the save operation in chunks
while ( oFileSave.hasMoreElements()){
oFileSave.writeBlock();
nremainBytes = oFileSave.getRemainingCount();
Response.Write(&quot;document.form1.progressBar.width = &quot; +
nTotalBytes - nremainBytes + &quot;;&quot;
}

// This component's interface blocks until the file is
// completely saved. Therefore you cannot update a progress
// bar by streaming script code to the browser.
oFileSave.SaveTo(&quot;D:\\myFolder\\&quot;
Response.Write(&quot;File Saved. Thanks for waiting.&quot;

Hope this helps
-pete

 

[tanderso]

Well, you could always fake it... upload an animated gif which adds progress to the bar at a slow steady pace. If it reaches the end before the download finishes, start over again. It would look cool though functionally useless.

Otherwise, I think you would have to use a plug-in or maybe a java applet.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com