Blazor Upload
The Blazor Upload component uploads single or multiple files to a server endpoint, with drag-and-drop, progress tracking, validation, and custom headers.
Upload files linkLink to this section
To get uploaded files handle the Change event and use its event arguments.
Console log
Upload files to a server linkLink to this section
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.
By default, the upload uses the HTTP POST method and sends files as multipart/form-data (standard form upload). You can change this via the Method property to use a different HTTP method,
or enable Stream to upload the file's raw data. When Stream is set to true, only single-file upload is supported.
Console log
Upload multiple files linkLink to this section
To upload multiple files set the Multiple property of the component to true.
Console log
Trigger upload from code linkLink to this section
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 linkLink to this section
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 linkLink to this section
To send additional parameters with the upload request use the Url property of the component.
Upload URL set to: api/upload/42?query=query
Console log
Show upload progress linkLink to this section
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 linkLink to this section
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
Custom file selection area linkLink to this section
Use ChooseTemplate to replace the default icon and text with custom content.
The whole area supports file selection and drag and drop, and retains the current theme's styling.
Set ChooseText to provide an accessible name. Use non-interactive content rather than nested buttons, links or inputs.
Instructions in the template are descriptive and do not add file validation.
Console log
Custom file list linkLink to this section
Set ShowFileList="false" to hide the built-in list without clearing selected files.
In manual upload mode, handle Change to display the selection and use RemoveFile to remove files by name.
Select files with distinct names to try this example, then click Upload to send the remaining files to the server.
Console log
Send custom HTTP headers linkLink to this section
To send custom HTTP headers with the upload request use RadzenUploadHeader.
Console log
Specify action method parameter name linkLink to this section
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 linkLink to this section
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. |
Frequently asked questions
How do I upload files in Blazor?
Use the RadzenUpload component: point its Url at a server endpoint, allow single or multiple files, and handle progress and completion events.
Related
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT