Radzen Blazor Components

Upload

Demonstration and configuration of the Radzen Blazor Upload component.

Upload files link

To get uploaded files handle the Change event and use its event arguments.

Choose

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.

Choose

Console log

Upload multiple files link

To upload multiple files set the Multiple property of the component to true.

Choose

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

Choose

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

Choose

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

Choose

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

Choose

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

Drag and drop here or click to choose files

Console log

Send custom HTTP headers link

To send custom HTTP headers with the upload request use RadzenUploadHeader.

Choose

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.

Choose

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.
All the tools in one place

Code Less. Deliver More.

With Radzen Subscription you get the full toolkit. Get started now and save hours on every project.

task_alt

Complete Blazor development environment.

task_alt

Open technology stack. No vendor lock-in.

task_alt

Ready-to-use UI blocks and app templates.

task_alt

Advanced theming.

task_alt

Dedicated support backed by proven expertise.

task_alt

No hidden runtime costs.

Radzen Blazor Studio

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙