aspnet-devexpress-dot-web-f36c888f.md
A file upload control.
Namespace : DevExpress.Web
Assembly : DevExpress.Web.v25.2.dll
NuGet Package : DevExpress.Web
public class ASPxUploadControl :
ASPxWebControl,
IAssociatedControlID,
ICallbackEventHandler
Public Class ASPxUploadControl
Inherits ASPxWebControl
Implements IAssociatedControlID,
ICallbackEventHandler
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.
The ASPxUploadControl control is available on the DX.25.2: Common Controls toolbox tab in the Microsoft Visual Studio IDE.
Drag the control onto a form and customize the control’s 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" />
<AdvancedModeSettings EnableDragAndDrop="True" EnableFileList="True" EnableMultiSelect="True" />
</dx:ASPxUploadControl>
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);
}
Imports DevExpress.Web
...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim uploadControl As ASPxUploadControl = 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)
End Sub
Important
DevExpress controls require that you register the ASPxUploadProgressHttpHandler and other special modules, handlers, and options, in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.
The ASPxUploadControl‘s client-side API is implemented with JavaScript language and exposed by the ASPxClientUploadControl object.
|
Availability
|
Available by default.
| |
Client object type
|
| |
Access name
|
ASPxUploadControl.ClientInstanceName
| |
Events
|
ASPxUploadControl.ClientSideEvents
|
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" />
</dx:ASPxUploadControl>
protected void ASPxUploadControl1_FileUploadComplete(object sender, DevExpress.Web.FileUploadCompleteEventArgs e) {
if (e.IsValid) {
e.UploadedFile.SaveAs(MapPath("Images/" + e.UploadedFile.FileName));
}
}
Protected Sub ASPxUploadControl1_FileUploadComplete(ByVal sender As Object, ByVal e As DevExpress.Web.FileUploadCompleteEventArgs)
If e.IsValid Then
e.UploadedFile.SaveAs(MapPath("Images/" & e.UploadedFile.FileName))
End If
End Sub
Run Demo: Multi-File Selection
To enable multi-file selection, set the AdvancedModeSettings.EnableMultiSelect property to true and the UploadMode property to Advanced.
<dx:ASPxUploadControl ID="UploadControl" UploadMode="Advanced" ...>
<AdvancedModeSettings EnableMultiSelect="True" />
</dx:ASPxUploadControl>
Read Tutorial: Multi-File SelectionRun Demo: tMulti-File Selection
With file validation, you can automatically validate file information on the server and provide descriptive error messages when necessary. The table below lists the validation properties.
|
Property
|
Description
|
Error Text Property
| | --- | --- | --- | |
|
Gets or sets the allowed file extensions of the uploaded file.
|
NotAllowedFileExtensionErrorText
| |
|
Gets or sets the maximum file count to be uploaded at once.
|
| |
|
Specifies the maximum size of the uploaded file.
|
|
<dx:ASPxUploadControl ID="UploadControl" UploadMode="Advanced" ... >
<AdvancedModeSettings EnableMultiSelect="True" />
<ValidationSettings MaxFileSize="4194304" MaxFileCount = "5"
AllowedFileExtensions=".jpg,.jpeg,.gif,.png" />
</dx:ASPxUploadControl>
Read Tutorial: Validation Run Demo: Multi-File Selection
End users can select multiple files and drag them to the Upload Control. To enable drag and drop functionality, set the AdvancedModeSettings.EnableDragAndDrop property to true and the UploadMode property to Advanced.
<dx:ASPxUploadControl ID="UploadControl" UploadMode="Advanced" ... >
<AdvancedModeSettings EnableDragAndDrop="True" />
</dx:ASPxUploadControl>
You can specify external drop zones where users can drop files to add them to the upload control. List zone IDs in the AdvancedModeSettings.ExternalDropZoneID property.
| Client Event | Description |
|---|---|
| DropZoneEnter | Fires when the mouse enters a drop zone while dragging a file. |
| DropZoneLeave | Fires when the mouse leaves a drop zone while dragging a file. |
<div id="externalDropZone" class="dropZoneExternal">
<div id="dragZone">
<span class="dragZoneText">Drag an image here</span>
</div>
<div id="dropZone" class="hidden">
<span class="dropZoneText">Drop an image here</span>
</div>
</div>
<dx:ASPxUploadControl ID="UploadControl" ClientInstanceName="UploadControl" runat="server" UploadMode="Auto" ... >
<AdvancedModeSettings EnableDragAndDrop="True" ExternalDropZoneID="externalDropZone" DropZoneText="" />
<ClientSideEvents>
DropZoneEnter="function(s, e) { if(e.dropZone.id == 'externalDropZone') setElementVisible('dropZone', true); }"
DropZoneLeave="function(s, e) { if(e.dropZone.id == 'externalDropZone') setElementVisible('dropZone', false); }"
</ClientSideEvents>
...
</dx:ASPxUploadControl>
Read Tutorial: Drag and Drop Run Demo: Drag and Drop Support
The ASPxUploadControl allows users to work with files stored on the most popular cloud services. Use the UploadStorage property to specify the cloud service where the control uploads files. The following cloud services are available:
|
|
|
Read Tutorial: Cloud Storage Account Management
The ASPxUploadControl ships with a rich set of customizable UI elements. Numerous settings and options allow you to fine-tune the upload control’s display and layout.
Read Tutorial: Upload Control Elements
Show 14 items
Object Control WebControl ASPxWebControlBase ASPxWebControl ASPxUploadControl ASPxHtmlEditorUploadControl
See Also