Pure HTML Progress Bar Upload    

This example shows how to show a Pure HTML Progress Bar during an upload.

Please note that iIf you have ASP script debugging enabled the progress bar will not work. When debugging is enabled the script engine locks IIS down to one page at a time per session. This means that the progress bar cannot update. So if you want the progress bar to work you need to disable debugging.

 

    
HTML
 
progressupload.htm    
     

Our multipart HTML form contains one file field for upload. When the form is submitted we will need to submit both the data in the main window and also spawn off a separate window to track progress. So instead of using a standard submit button we have to use a normal button with a client side JavaScript action attached to it.

When the submit button is clicked the DoUpload client side function takes over. It creates a unique ID which will be used to identify the transfer. It spawns a progress window (progressbar.asp) and puts the ID into the URL so that it can be retrieved using QueryString. Finally it submits the form to progressupload.asp, again putting the ID into the URL so that it is easily available via QueryString.

This is an unusual use of HTTP and worth reiterating. The progressbar.asp page has an ID supplied to it via the URL (i.e. a GET request). The progressupload.asp page has the content of the form submitted to it via a standard POST and also has an ID supplied via the URL.

<html>
<body>

<script language="javascript">
<!--
function DoUpload() {
  theFeats =   "height=120,width=500,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no";
  theUniqueID = (new Date()).getTime() % 1000000000;
  window.open("progressbar.asp?ID=" + theUniqueID, theUniqueID, theFeats);
  document.myform.action = "progressupload.asp?ID=" + theUniqueID;
  document.myform.submit();
}
//-->
</script>

<form name="myform" method="post" action="progressupload.asp" enctype="multipart/form-data">
<input type="file" name="filefield1"><br>
<input type="button" name="dosubmit" value="Upload" OnClick="DoUpload()"><br>
</form>

</body>
</html>


   
ASP
 
progressupload.asp    
     

The upload page is simple. First we set some preferences such as the ScriptTimeOut to avoid IIS timing out long uploads. However the key aspect of this page is that before we reference any fields we set the XForm ID to the one supplied to us in the URL. This ID will be used by the XForm object to log the progress of the upload as data is received.

<%
Response.Expires = -10000
Server.ScriptTimeOut = 300

Set theForm = Server.CreateObject("ABCUpload4.XForm")
theForm.Overwrite = True
theForm.MaxUploadSize = 8000000
theForm.ID = Request.QueryString("ID")
Set theField = theForm.Files("filefield1")
If theField.FileExists Then
  theField.Save theField.FileName
End If
%>

<html>
<body>
Upload Complete...
</body>
</html>

 

    
ASP
 
progressbar.asp    
     

The progress bar is slightly more complicated.

Because data will be being uploaded at the same time as the progress bar page is being refreshed we have to disable session state via an ASP processing directive on the first line.

We insert meta-tags to ensure that the page refreshes itself every couple of seconds. We create an XProgress object and set the ID to the unique ID we were passed in the URL. This synchronizes the XProgress object with the matching XForm object.

We want to close the progress window once the transfer has been completed so we put in a simple piece of client side JavaScript to do this. The rest of the form simply reports to the user the information retrieved via the XProgress object. The progress bar itself is simply a table containing a colored cell of a particular width.

<%@EnableSessionState=False%>
<html>
<head>
<title>Progress...</title>
<meta http-equiv="expires" content="Tue, 01 Jan 1981 01:00:00 GMT">
<meta http-equiv=refresh content="2,progressbar.asp?ID=<%=Request.QueryString("ID")%>">

<%
On Error Resume Next
Set theProgress = Server.CreateObject("ABCUpload4.XProgress")
theProgress.ID = Request.QueryString("ID")
%>

<script language="javascript">
<!--
if (<% =theProgress.PercentDone %> == 100) top.close();
//-->
</script>

</head>
<body bgcolor="#CCCCCC">

<table border="0" width="100%">
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Uploading:</b></font></td>
</tr>
<tr bgcolor="#999999">
<td>
<table border="0" width="<%=theProgress.PercentDone%>%" cellspacing="1" bgcolor="#0033FF">
<tr>
<td><font size="1">&nbsp;</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="100%">
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Estimated time left:</font></td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
<%=Int(theProgress.SecondsLeft / 60)%> min
<%=theProgress.SecondsLeft Mod 60%> secs
(<%=Round(theProgress.BytesDone / 1024, 1)%> KB of
<%=Round(theProgress.BytesTotal / 1024, 1)%> KB uploaded)</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
Transfer Rate:</font></td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
<%=Round(theProgress.BytesPerSecond/1024, 1)%> KB/sec</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Information:</font></td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><%=theProgress.Note%></font></td>
</tr>
</table>
</td>
</tr>
<tr></tr>
</table>

</body>
</html>