The Progress Indicator (Pure HTML)

A server-side Pure HTML progress indicator included with UpFilesBE allows us to monitor, log and display the progress of an upload. The progress indication module monitors the whole upload. As a result an individual file within the upload cannot be watched. But the name of the file currently uploading, however, is available as the CurrentFile property of the DNUpFilesProgressBE object. The progress monitoring is dependent on UpFilesBEModule, UpFilesBE's HTTPModule used for ASP.NET.

Upload With Progress Example

VB.NET

UploadWithProgress.aspx
[Run Sample] \|	[View Source]

UploadWithProgress.aspx
[Run Sample] \|	[View Source]

The Upload Form

UploadWithProgress.aspx contains an HTTP upload form which includes an HTTP field of type "file". The upload of this file will be monitored by the Progress Indicator.

The web Server UploadWithProgress.aspx.cs script

UploadWithProgress.aspx.cs generates a progress ID string which is available in the client script.


    // This variable is visible in the client script
    protected string  ProgID;

    // create NextProgressID and assign it to global variable ProgID
    ProgID = (new UpFilesBE()).NextProgressID();

UploadWithProgress.aspx client-side script

The ProgID will be passed back to UploadWithProgress.aspx and to showprogress.aspx through the ButtonUpload_OnClick() function. Clicking ButtonUpload will call ButtonUpload_OnClick(). The function submits the upload request with the ProgID to UploadWithProgress.aspx, and at the same time opens the progress indicator window (ShowProgress.aspx), passing it the ProgID:

 
    Function ButtonUpload_OnClick()
        winstyle="height=320,width=300,status=no,toolbar=no,menubar=no,location=no"
        window.open "ShowProgress.aspx?dnProgressIdName=ProgID",Nothing,winstyle 
        Form1.action = Form1.action & "?dnProgressIdName=ProgID"
    End Function

Top

The progress monitoring is accomplished by using expandata.net UpFilesBEModule, (an HTTPModule used for ASP.NET) When enabled this dll would intercept the incoming request before it reaches the ASP.NET. All relevant parameters required for the upload progress are calculated and logged at this point of interception. The ProgressIndicator parameter must be set to "1" in the UpFilesParams section of the web.config file, for the progress monitoring to take place.

The HttpModule starts logging the upload progress under two conditions.

ProgressIndicator value is set to "1" in the web.config file
ProgressId is found in the querystring.

The web Server ShowProgress.aspx.cs script

ShowProgress.aspx displays the progress within an HTML table. It displays the following Properties of the DNUpFilesProgressBE object.

Transfer Rate
Current File
Finished
Percentage
SecondsElapsed
SecondsRemaining
TotalBytes
TransferredBytes

In addition it displays a visual progress indicator

The name of the currently uploading file is available eventhough an individual file within an upload cannot be watched because the progress indicator monitors the whole upload.


        //Retrieve  ProgressId from QueryString 
        string pid = this.Request.QueryString["dnProgressIdName"];

        //create DNUpFilesProgressBE object
        DNUpFilesProgressBE dNUpFilesProgressBE = new DNUpFilesProgressBE();
        
        // set ProgressId to pid from the QueryString
        dNUpFilesProgressBE.ProgressId = pid;

        // start Monitor
        dNUpFilesProgressBE.Monitor = true;

Top

The number of bytes received on the web server provide a measure of the progress from client to web server.

Progress Indicator Properties

`BytesPerSecondAverage`	Gets an int value specifying the current incoming upload data rate, in Bytes per Second.
`Canceled`	Gets a bool value specifying whether the current Upload and Progress Operation was canceled.
`CurrentFile`	Gets a string value specifying the name of the file being uploaded currently.
`Delete`	Gets or sets a bool value specifying whether the progress log database file should be deleted at the end of log session.
`Finished`	Gets a bool value specifying whether the upload has finished.
`Monitor`	Sets a bool value specifying whether to start monitoring the upload progress.
`Percentage`	Gets an int value specifying the percentage of incoming upload accomplished at this instance.
`ProgressId`	Gets or sets the ProgressId of the current upload.
`SecondsElapsed`	Gets an int value specifying the number of seconds elapsed since the current upload started.
`SecondsRemaining`	Gets an int value specifying the number of seconds remaining for the current upload to finish.
`Started`	Gets a bool value specifying whether the current upload has started.
`TimeRemaining`	Gets a formated string value specifying the total time (hrs:mins:secs) remaining for the current upload to finish.
`TotalBytes`	Gets an ulong value specifying the total number of bytes in the current upload.
`TransferredBytes`	Gets an ulong value specifying the number of bytes transferred so far for the current upload.

Progress Indicator Methods

`Cancel`	Cancels the current Upload and Progress session.
`NextProgressID`	Gets a string value specifying the Next Progress ID to be assigned to the next upload, for which the progress would be monitored.

Top