The Upload component allows users to upload files to the server. Users can select files in the open file dialog or drag and drop files to the drop zone.
The main Upload API members are listed below:
- Name - Required to access uploaded files on the server.
- UploadUrl - Specifies a target URL for the upload request.
- Visible - Specifies whether the component is visible.
- SelectedFilesChanged - Fires when the file list is changed.
- ExternalSelectButtonCssSelector - Specifies the CSS selector of a button or HTML element that invokes the open file dialog.
- ExternalDropZoneCssSelector - Specifies the CSS selector of a container or HTML element where to drop the files.
- ExternalDropZoneDragOverCssClass - Specifies the CSS class that is used for a drop zone when users drag files over it.
This demo illustrates how to implement the external Select File button and drop zone container. The Upload component is hidden when the file list is empty.
This demo illustrates how to upload large files in chunks and process these chunks on the server. The ChunkSize property specifies their size in bytes.
In this demo, users can upload multiple files at once. Set the AllowMultiFileUpload property to true to enable this behavior.
Use the UploadMode property to specify how the Upload component uploads files.
- Instant (Default) - Files are uploaded when a user selects or drops them.
- OnButtonClick - Files are uploaded after a user clicks the common upload button or individual buttons for each file.
In this demo, the upload mode is set to UploadMode.OnButtonClick.
The Upload component allows you to validate uploaded files on the client. This demo demonstrates how to use the MaxFileSize and AllowedFileExtensions properties to limit the maximum file size and specify accepted file extensions.
You should also validate uploaded files on the server side (in controller actions). The code above creates the UploadValidationController that checks file extensions and file size.