Adding a Progress Indicator

FileUp's Server-Side Progress Indicator
XFile's Client-Side Progress Indicator

FileUp's 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 ASP page. In this page, you can get and display to the user:

The Percentage of the upload that has reached the server.
TotalBytes in the upload.
TransferredBytesso far.

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

The FileUp Progress Indicator is explained in-depth in the Programmer's Guide. Please see the page "Adding a Server-Side Progress Indicator appropriate to your development language.

Top

XFile's Client-Side Progress Indicator

SoftArtisans XFile provides a progress indicator that can show accurate client-side progress.

In this example, there are three objects involved:

AXFFile	The explorer-like file selection control that includes all the objects that are part of XFile.
XFRequest	The non-visual object that actually performs the transfer.
AXFFileProgress	The control that displays the progress of the transfer.

The Progress control displays the status of the transfer. We ensure that the Progress control is displayed before the transfer starts. Otherwise, in the multi-threaded environment of Internet Explorer, a transfer could complete before the progress window is displayed, yielding an inconsistent user experience.

Let's discuss how to create a progress window using XFile.

You need two HTML files for these examples: a page that contains AXFFile and a progress page.

The following code is an example of the page containing AXFFile:

The Client Code

The Client Code
<html> <head> <script language="javascript"> XFile = AXFFile.XFrequest; XFile.CurrentUrl = "localhost/safileupsamples/formresp2.asp"; AXFFile.AddFile("C:\boot.ini"); AXFFile.AddFile("C:\autoexec.bat"); function startUpload() { winStyle = "height=300,width=400,status=no," & _ "toolbar=no,menubar=no,location=no"; window.open("AXFFileProgress.htm", "_blank", winStyle); } </script> </head> <body> <strong> <font color="black" size="5"> SoftArtisans Visual Control (AXFFile) Multi-File Preset Upload Sample </font> </strong> <object classid="CLSID:230C3D02-DA27-11D2-8612-00A0C93EEA3C" id="AXFFile" style="left: 0px; top: 0px"> </object> <input id="Button1" name="Button1" type="button" value="Start Upload" onclick = "startUpload()"> </body> </html>

<html>
<head>
                <script language="javascript">

XFile = AXFFile.XFrequest;
XFile.CurrentUrl = "localhost/safileupsamples/formresp2.asp";
AXFFile.AddFile("C:\boot.ini");
AXFFile.AddFile("C:\autoexec.bat");
function startUpload()
{
winStyle = "height=300,width=400,status=no," & _
"toolbar=no,menubar=no,location=no";
window.open("AXFFileProgress.htm", "_blank",
                winStyle);
}

</script>
</head>
                <body>
<strong>
<font color="black" size="5">
SoftArtisans Visual Control (AXFFile) Multi-File Preset Upload Sample
</font>
</strong>


<object classid="CLSID:230C3D02-DA27-11D2-8612-00A0C93EEA3C"
id="AXFFile" style="left: 0px; top: 0px">
</object>

<input id="Button1" name="Button1" type="button"
                value="Start Upload"
                
onclick = "startUpload()">


</body>
</html>

This is very similar to our multiple file download example . The StartUpload function is called from the button created later on in the script. Note that in this example, since we are using the graphical control , there is a different ClassID for the object.

The last script section should also look rather familiar. The major difference in this case is that the AddFile method only requires one argument; the location and naming of the files to be uploaded are handled by FormResp2.asp.

AXFFileProgress.htm starts the upload process. We instantiate the XFile Progress object AXFFileProgress to create and display properties of the transfer.

Here is the major section of AXFFileProgress.htm.

The Progress Indicator

The Progress Indicator
..... <head> <script language="vbscript"> function callback() { Document.All("AXFFileProgress").XFRequestStream = Opener.Document.All("AXFFile").XFRequestStream; Document.All("AXFFileProgress").ShowProgress(); Opener.Document.All("AXFFile").Start(); Window.Close(); } function AXFFileProgress_TransferComplete() { alert("Transfer completed"); } </script> </head> <body onload="callback()"> <object id="AXFFileProgress" classid="CLSID:C3EAF164-E06A-11D2-B5C9-0050041B7FF6"> </object>

.....
<head>
<script language="vbscript">
function callback()
{
                   Document.All("AXFFileProgress").XFRequestStream =
                      Opener.Document.All("AXFFile").XFRequestStream;
Document.All("AXFFileProgress").ShowProgress();
Opener.Document.All("AXFFile").Start();
Window.Close();
}
                
                function AXFFileProgress_TransferComplete()
{
                   alert("Transfer completed");
}
                </script>
</head>
<body onload="callback()">

<object id="AXFFileProgress"
                
classid="CLSID:C3EAF164-E06A-11D2-B5C9-0050041B7FF6">
</object>

The sections of this file work as follows:

The Callback function sets the XFRequestStream property of the AXFFileProgress control to that of the AXFFile control, and tells the progress control to show the upload progress. This is where the communication is made between the AXFFileProgress control and the AXFFile control. The Callback function also calls the Start function of the AXFFile control so that the process may begin. The Progress window is closed when the transfer is done.
The body tag includes the OnLoad parameter, which calls the Callback function as the Progress form is opened.
The object tag creates the AXFFileProgress control to be used on the page.
We then use the TransferComplete event handler to prompt when the upload is done.

Top