DevExpress Blazor UI Component Library includes two components that allow you to handle file upload: DxUpload and DxFileInput. Both these components allow you to upload files to a server, send them to another destination, or save them to the file system. The key difference between these components is that the Upload component requires creating a separate web API controller to upload files, while the File Input component gives you direct and secure access to selected files in Razor code.

The Upload component allows users to select files in the open file dialog or drag and drop files onto 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.

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.

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.