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.