Tab
A newer version of this page is available. Switch to the current version.

ASPxUploadControl Class

A file upload control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.1.dll

Declaration

public class ASPxUploadControl :
    ASPxWebControl,
    IAssociatedControlID,
    ICallbackEventHandler

Remarks

The Upload Control can upload files with AJAX callbacks for improved responsiveness, offers built-in file validation support, and ships with an advanced client-side API.

UploadControl_class.png

Create an Upload Control

Design Time

The ASPxUploadControl control is available on the DX.19.1: Common Controls toolbox tab in the Microsoft Visual Studio IDE.

UploadControl_Toolbox.png

Drag the control onto a form and customize control settings, or paste the control markup in the page’s source code.

<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" UploadMode="Auto" ShowProgressPanel="True" ShowUploadButton="True">
     <ValidationSettings AllowedFileExtensions=".jpg, .jpeg, .gif, .png" MaxFileSize="4194304">
     </ValidationSettings>
     <AdvancedModeSettings EnableDragAndDrop="True" EnableFileList="True" EnableMultiSelect="True">
     </AdvancedModeSettings>
</dx:ASPxUploadControl>

Run Time

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e) {
     ASPxUploadControl uploadControl = new ASPxUploadControl();
     uploadControl.ID = "ASPxUploadControl1";
     uploadControl.UploadMode = UploadControlUploadMode.Auto;
     uploadControl.ShowProgressPanel = true;
     uploadControl.ShowUploadButton = true;
     uploadControl.AdvancedModeSettings.EnableDragAndDrop = true;
     uploadControl.AdvancedModeSettings.EnableFileList = true;
     uploadControl.AdvancedModeSettings.EnableMultiSelect = true;
     uploadControl.ValidationSettings.AllowedFileExtensions = new String[] { ".jpg", ".jpeg", ".gif", ".png" };
     uploadControl.ValidationSettings.MaxFileSize = 4194304;
     uploadControl.FileUploadMode = UploadControlFileUploadMode.OnPageLoad;
     // Add the created control to the page
     Page.Form.Controls.Add(uploadControl);
}

Client-Side API

The ASPxUploadControl‘s client-side API is implemented with JavaScript language and exposed by the ASPxClientUploadControl object.

Availability

Available by default.

Class name

ASPxClientUploadControl

Access name

ClientInstanceName

Events

ASPxUploadControl.ClientSideEvents

Features

File Upload

The file upload starts when a user clicks the upload button or ASPxClientUploadControl.Upload method is called. Set the AutoStartUpload property to true to start file upload when a file is added to the upload control.

Upload Event Description
ASPxUploadControl.FileUploadComplete Occurs after a file has been uploaded to the server.
ASPxUploadControl.FilesUploadComplete Occurs after all the selected files have been uploaded to the server.
ASPxClientUploadControl.FilesUploadStart Occurs on the client side before file upload is started.
ASPxClientUploadControl.FileUploadComplete Occurs on the client side after a file has been uploaded.
<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" OnFileUploadComplete="ASPxUploadControl1_FileUploadComplete">
     <ValidationSettings AllowedFileExtensions=".txt,.jpg,.jpe,.jpeg,.doc" MaxFileSize="1000000">
     </ValidationSettings>
</dx:ASPxUploadControl> 
protected void ASPxUploadControl1_FileUploadComplete(object sender, DevExpress.Web.FileUploadCompleteEventArgs e) {
     if (e.IsValid) {
          e.UploadedFile.SaveAs(MapPath("Images/" + e.UploadedFile.FileName));
     }
} 

See demo

Multi-File Selection

To enable multi-file selection, set the AdvancedModeSettings.EnableMultiSelect property to true and the UploadMode property to Advanced.