ASPxClientUploadControl.UploadingProgressChanged Event

Occurs on the client side when the progress bar indicator position is changed.

Declaration

UploadingProgressChanged: ASPxClientEvent<ASPxClientUploadControlUploadingProgressChangedEventHandler<ASPxClientUploadControl>>

Event Data

The UploadingProgressChanged event's data class is ASPxClientUploadControlUploadingProgressChangedEventArgs. The following properties provide information specific to this event:

Property	Description
currentFileContentLength	Gets the content length of the currently uploaded file.
currentFileName	Gets the name of the file being currently uploaded.
currentFileProgress	Gets the position of the current file upload progress.
currentFileUploadedContentLength	Gets the content length of the current file already uploaded to the server.
fileCount	Gets the number of the files selected for upload.
progress	Gets the current position of total upload progress.
totalContentLength	Gets the content length of the files selected for upload.
uploadedContentLength	Gets the content length of the files already uploaded to the server.

Remarks

The UploadingProgressChanged event is generated sequentially during a file upload (when a file piece of a specified size - UploadAdvancedModeSettings.PacketSize - is uploaded to a server) and is also invoked on a when the file upload is completed. This event can be used to implement a custom file upload visualization. The event’s argument exposes all the required information about the current state of the file upload.

Note

To function properly, the ASPxClientUploadControl‘s progress panel requires the functionality of the ASPxUploadProgressHttpHandler. This handler is automatically added to a web project’s Web.Config file when you add an ASPxUploadControl to a page. If you create the control via code, you should manually register the ASPxUploadProgressHttpHandler within the Web.Config file.

Note

The UploadingProgressChanged event fires only in the Advanced Upload Mode (if the ASPxUploadControl.UploadMode property is set to UploadControlUploadMode.Advanced).

Example

In this example, the ASPxProgressBar control is used to visualize the progress of a file upload initiated within the ASPxUploadControl. The ASPxClientUploadControl.UploadingProgressChanged client event of the ASPxUploadControl is handled, to supply the ASPxProgressBar control with current progress information. Using the ASPxProgressBar as a separate control, allows placing it at any desired position within the page.

JS

function OnBtnUploadClick(s, e){
            if(uploadControl.GetText() != ""){
                lblCompleteMessage.SetVisible(false);
                pbUpload.SetPosition(0);
                uploadControl.Upload();
                btnUpload.SetEnabled(false);
                pnlProgress.SetVisible(true);
            }
        }

        function OnUploadProgressChanged(s, e){
            pbUpload.SetPosition(e.progress);
        }

        function OnFileUploadComplete(s, e){
            if(e.isValid){
                btnCancel.SetVisible(false);
                btnUpload.SetEnabled(true);
                pbUpload.SetPosition(100);
                lblCompleteMessage.SetVisible(true);
            }
            else{
                btnUpload.SetEnabled(true);
                pnlProgress.SetVisible(false);
            }
        }

        function OnBtnCancelClick(s, e){
            uploadControl.Cancel();
            btnUpload.SetEnabled(true);
            pnlProgress.SetVisible(false);
        }

        function OnUploadControlTextChanged(s, e){
            btnUpload.SetEnabled(s.GetText() != "");
        }

ASPX

...
<dxe:ASPxLabel ID="lblFileSizeMessage" runat="server" 
   Text="The size of a file to upload shouldn't be greater than 5000 Kb." 
   CssClass="smallMessage" />
...
<dxuc:ASPxUploadControl ID="uc" ClientInstanceName="uploadControl" runat="server">
   <ClientSideEvents UploadingProgressChanged="OnUploadProgressChanged" 
   FileUploadComplete="OnFileUploadComplete"
   TextChanged="OnUploadControlTextChanged" />
</dxuc:ASPxUploadControl>
...
<dxe:ASPxButton ID="btnUpload" ClientInstanceName="btnUpload" 
   Runat="server" Text="Upload" AutoPostBack="False">
   <ClientSideEvents Click="OnBtnUploadClick" />
</dxe:ASPxButton>
...
<dxe:ASPxProgressBar ID="pbUpload" ClientInstanceName="pbUpload" 
   runat="server" Width="200px" Height="23px" />
...
<dxe:ASPxButton ID="btnCancel" ClientInstanceName="btnCancel" 
   runat="server" Text="Cancel"  AutoPostBack="False">
   <ClientSideEvents Click="OnBtnCancelClick" />
</dxe:ASPxButton>
...
<dxe:ASPxLabel ID="lblCompleteMessage" 
   ClientInstanceName="lblCompleteMessage" ClientVisible="False"
   runat="server" Text="Upload completed" />
...