Adding a Server-Side Progress Indicator

FileUp includes a server-side progress indicator that can be displayed to the user using HTML. The server-side progress indicator lets you know how much of the entire upload has arrived at the server. In an upload from the browser to an ASP page, include the progress indicator in a separate page. In this page, you can get and display to the user:

You can use HTML techniques to customize the output effect, and display a counter or a progress bar.

EnableSessionState Directive

The progress indicator needs to operate outside of the current session in order to refresh properly. In order to maintain session state, ASP must serialize all requests for that session. To allow the progress indicator to execute outside of a session, the following directive must be added to the progress indicator page:

<%@ ENABLESESSIONSTATE=False %>

Setting the EnableSessionState directive to False allows the progress indicator page's request to be processed on a separate thread. This allows the progress indicator to update itself while the upload continues to be processed on another thread. If this directive is not set, or is set to true, then the progress indicator is queued until the upload finishes. At this point, the progress indicator can now be updated, but the upload is complete, so the indicator jumps immediately from 0% to 100%.

The upload form and processing page can participate in the session as usual.

Example

The following lines are from an application that contains three scripts: form.asp, formresp.asp and progress.asp. Form.asp submits the file to the upload processing page formresp.asp. Progress.asp contains the progress indicator.

Form.asp
...
<%
'--- Instantiate the FileUpProgress object.
Set progress = Server.CreateObject("SoftArtisans.FileUpProgress")

'--- Get the next available progress ID.
'--- The progress ID is how the progress indicator and FileUp
'--- sychronize with each other.
intProgressID = progress.NextProgressID
%>
...
<head>
<script language="javascript">
<i>/*
This function makes sure that the progress indicator and server-side
processing page receive the new progress ID we just created. Also, it pops up the
progress window.
*/</i>
function startupload() {
winstyle="height=150,width=500,status=no,_       toolbar=no,menubar=no,location=no";
window.open("progress.asp?progressid=<%=intProgressID%>",_       "_blank",winstyle);
document.theForm.action="formresp.asp?progressid=<%=intProgressID%>";
}
</script>
</head>
<body>
...
<form onSubmit="startupload();" id="theForm"
name="theForm" action="formresp.asp"
enctype="multipart/form-data" method="post">
<p>Enter Filename:</p>
<input type="file" id="myFile" name="myFile" />
<p>Click "Browse" to select a file to upload</p>
<input type="submit" id="sub1" name="sub1" value="Upload File" />
</form>
...

Formresp.asp
<%
'--- Instantiate the FileUp object
Set fileUpload = Server.CreateObject("SoftArtisans.FileUp")

'--- Assign the same progress ID that we assigned to the progress object
fileUpload.ProgressID = CInt(Request.QueryString("progressid"))

fileUpload.Path = "C:\temp"
...
fileUpload.Form("myFile").Save
...
%>

Progress.asp
<%@ language=VBScript ENABLESESSIONSTATE=False %>
<%
'-----------------------------------------------------------------------
'--- This is the progress indicator itself. It refreshes every second
'--- to re-read the file progress properties, which are updated thoughout
'--- the upload.
'-----------------------------------------------------------------------
'--- Declarations
Dim progress
Dim intProgressID
Dim intPercentComplete
Dim intBytesTransferred
Dim intTotalBytes
Dim bDone

intPercentComplete = 0
intBytesTransferred = 0
intTotalBytes = 0

'--- Instantiate the FileUpProgress object
Set progress = Server.CreateObject("Softartisans.FileUpProgress")

'--- Set the ProgressID with the value we submitted from the form page
progress.ProgressID = CInt(Request.QueryString("progressid"))

'--- Read the values of the progress indicator's properties
intPercentComplete = progress.Percentage
intBytesTransferred = progress.TransferredBytes
intTotalBytes = progress.TotalBytes

%>
<html>
<head>
<%
'--- If the upload isn't complete, continue to refresh
If intPercentComplete < 100 Then
bDone = False
Response.Write("<meta http-equiv=""Refresh"" content=1>")
Else
bDone = True
End If
%>
</head>
<body>
<table border="1">
<tr>
<td colspan="3"><b>FileUp Progress Indicator</b></td>
<td colspan="2"><b>Status:
<%
If bDone Then
Response.Write("Complete!")
Else
Response.Write("Sending")
End If
%>
</b></td>
</tr>
<tr>
<td>Progress ID </td>
<td>Graphic Indicator</td>
<td>Transferred Bytes</td>
<td>Total Bytes</td>
<td>Transferred Percentage</td>
</tr>
<tr>
<td align="left"><%=progress.progressid%></td>
<td>
<table bordercolor="black" border="1" cellspacing="0"
align="left" width="<%=intPercentComplete%>%">
<tr>
<td align="right" width="100%" bgcolor="blue">
<B><%=intPercentComplete%></b></td>
</tr>
</table>
<%
Response.Write("</td>")
Response.Write "<td align="center">" & intBytesTransferred & "</td>"

If progress.TotalBytes > 0 Then
Response.Write("<td align="center">" & intTotalBytes & "</td>" & _
"<td align="center">" & intPercentComplete & "%</td>" )
Else
Response.Write ("<td align="center">" & "N/A" & "</td>" & _
"<td align="center">" & "N/A" & "</td>")
End If

%>
</tr>
</table>
</body>
</html>

Top

Copyright © 2010 SoftArtisans, Inc. All rights reserved.