Upload
Demonstration and configuration of the Radzen Blazor Upload component.
These demos showcase file upload with Change event handling, server-side upload via Url property, multiple file selection, programmatic upload triggering with Auto="false" and Upload() method, file filtering using Accept property, additional parameters, progress tracking with Progress event, drag-and-drop support, custom HTTP headers with RadzenUploadHeader, and customizable parameter names.
Upload files link
To get uploaded files handle the Change event and use its event arguments.
Console log
Upload files to a server link
To upload files to a server set the Url property of the component. The URL should point to an action method in your server-side code that handles the file upload.
Console log
Upload multiple files link
To upload multiple files set the Multiple property of the component to true.
Console log
Trigger upload from code link
To trigger the upload from code set the Auto property of the component to false. The upload can be triggered by calling the Upload() method of the component.
Select a file to upload and click Upload
Console log
File filter link
To filter the files that can be uploaded use the Accept property of the component. The Value should be a comma separated list unique file type specifiers
Console log
Use parameters link
To send additional parameters with the upload request use the Url property of the component.
Upload URL set to: upload/42?query=query
Console log
Show upload progress link
This demo shows how to use the RadzenProgressBar component to show upload progress by handling the Progress event.
Select a file to upload
Drag and drop files to upload link
This demo shows how to use the RadzenUpload component to allow users to drag and drop files for upload. The ChooseText property is used to set the text displayed when no files are selected.
Drag and drop files to upload
Console log
Send custom HTTP headers link
To send custom HTTP headers with the upload request use RadzenUploadHeader.
Console log
Specify action method parameter name link
To specify the action method parameter name use the ParameterName property of the component. The value should be a string. By default the parameter name is file
or files if the Multiple property is set to true.
Console log
Keyboard Navigation link
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Upload component.
| Press this key | To do this |
|---|---|
| Tab | Navigate forward across Upload buttons. |
| Shift + Tab | Navigate backward across Upload buttons. |
| Enter or Space | Click the focused Upload button. |
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT