Utilizing Progress Indicators

Progress indicators allow users to visualize the file upload process. In short, it helps users to know how much of file has uploaded or what remains to be uploaded.

FileUploadProgress Control

If you want to show progress indicators within your application, you will need to add the the FileUploadProgress control to the page and set the FileUploadControlID property to the correct id of the FileUploadControl.

When you start uploading a file, the progress indicator will automatically be displayed. The FileUploadProgress control shows the waiting information and the request progress information from the server. If a progress information request is received, the control shows progress information with a progress bar, current file name, bytes received and even more information.

The FileUploadProgress Control

The FileUploadProgress control uses AJAX and client-side binding to load progress information.

FileUploadProgress Designer View

 

You should assign the FileUploadControlID with the current ID of the FileUploadControl.

Use the InfoTemplate to redesign the progress information view.

You can customize the appearance of the InfoTemplate as you wish. You can add the following available variables with the help of the DataBinder class. The variables can be added in any combination inside the InfoTemplate.

 

Variable name

Description

UploadFileName

Name of uploading file (with extension).

UploadBytesTotal

Size of uploading file (in bytes/KB/MB/TB/PB/EB/ZB/YB).

UploadBytesReceived

Amount of received bytes at the moment (in bytes/KB/MB/TB/PB/EB/ZB/YB).

UploadStartUpload

Time when upload has begun (hours : minutes : seconds).

UploadEndUpload

Time when the upload has stopped (hours : minutes : seconds). This variable is changed when an error has occurred or uploading has finished . In the normal progress view it is not necessary to display this time.

UploadLastModified

Time (hours : minutes : seconds) when upload progress information has been updated (next portion of bytes have been delivered to the server). In normal progress view it is not necessary to display this time.

UploadEstimatedTime

Estimated time of upload duration (minutes : seconds).

UploadTimeRemaining

Time remaining till uploading has finish. (minutes : seconds)

UploadTransferRate

Uploading speed (in bytes/KB/MB/TB/PB/EB/ZB/YB per second).

UploadProgress

Percent of uploaded bytes (integer number). You can add “%” sign manually.

UploadErrorMessage

Contains error message (as string) if some error has occurred during uploading.

UploadResult

Integer result of current uploading. In normal progress view it is not necessary to display this variable. “-1” – the uploading has not begun yet, “-2” – uploading has faulted, “-3” – uploading has succeeded, “0” – uploading is running at the moment.

 

In the following example all these variables are shown during uploading.

<mc:FileUploadProgress ID="fuProgress" runat="server" FileUploadControlID="fuControl">
<WaitTemplate><i>Wait for uploading start</i></WaitTemplate>
<InfoTemplate>File Name: <%#DataBinder.Eval(Container, "UploadFileName")%><br/>
Estimated Time: <%#DataBinder.Eval(Container, "UploadEstimatedTime")%><br />
Bytes Received: <%#DataBinder.Eval(Container, "UploadBytesReceived")%><br />
Upload Result: <%#DataBinder.Eval(Container, "UploadResult")%><br />
Upload Bytes Total: <%#DataBinder.Eval(Container, "UploadBytesTotal")%><br />
Upload Start Upload: <%#DataBinder.Eval(Container, "UploadStartUpload")%><br />
Upload End Upload: <%#DataBinder.Eval(Container, "UploadEndUpload")%><br />
Upload Last Modified: <%#DataBinder.Eval(Container, "UploadLastModified")%><br />
Upload Error Message: <%#DataBinder.Eval(Container, "UploadErrorMessage")%><br />
Upload Progress: <%#DataBinder.Eval(Container, "UploadProgress")%>%<br />
Upload Transfer Rate: <%#DataBinder.Eval(Container, "UploadTransferRate")%><br />
Upload Time Remaining: <%#DataBinder.Eval(Container, "UploadTimeRemaining")%><br />
</InfoTemplate>
</mc:FileUploadProgress>

And the upload progress control looks like the following:

 

Use the WaitTemplate to redesign the waiting information view.

Also you can redesign the entire progress bar style if you wish.


Copyright 2007 Mediachase. All rights reserved.