Drag and Drop File Hereor

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:

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.

To maintain the highest possible security posture, we do not include the full implementation of the Upload controller. To incorporate secure file upload operations in your web app, we recommend that you add different validation types to upload controller code as described in the following help section: Validation. For information on controller implementation code for different file upload scenarios, refer to the following Microsoft article: File Upload Scenarios.

Chunk Upload

Click the Select File button to select a file

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.

Multiple File Selection

Click the Select Files button to select a file

In this demo, users can upload multiple files at once. Set the AllowMultiFileUpload property to true to enable this behavior.

Upload Modes

Click the Select Files button to select a file

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.


Click the Select Files button to select a file

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.