ASPxClientUploadControl.Upload Method

Initiates uploading of the specified file(s) to the web server’s memory.

Declaration

Upload(): void

Remarks

Use the Upload method to upload the specified file(s) using an AJAX callback technology.

A call to the Upload method sends a specific callback to the server that initiates uploading of the file(s) selected within the ASPxUploadControl. At the same time, the ASPxClientUploadControl.FileUploadStart client event fires allowing specific client actions to be performed in response to the file upload being initiated. When the specified file’s upload is completed on the server during the callback processing, the ASPxUploadControl.FileUploadComplete server event is generated, enabling the uploaded file to be validated and saved to a specific location on the server. Finally, the ASPxClientUploadControl.FileUploadComplete client event occurs when the processed callback returns from the server side back to the client.

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. The complete sample project is available in the DevExpress Code Central database at E1252.

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" />
...