Radzen Blazor Components
mode_heat

NEW: Radzen Blazor for Visual Studio

The extension brings Radzen’s rich feature set and productivity tools directly into the familiar Visual Studio 2022 environment. Connect to data, design, code seamlessly, and work faster within Visual Studio. Learn More ↗

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.

Supercharge your Blazor development with Radzen

Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.

Pro

Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles.

Learn More
New

Radzen Blazor for Visual Studio

Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!

Learn More
>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 🗙