Blazor Upload - Overview

Drag and drop files here to upload
Accepted files: PDF and DOCX

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
  • Overview.razor
Loading the demo source code...please wait.
blazor ui ninja image

The Upload component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Description

The Blazor FileUpload component enables users to select and upload files asynchronously from their local devices to dedicated server handlers. File Upload offers you a rich events list to accommodate security information, application logic and even file validation.

The Telerik UI for Blazor FileUpload component helps you implement non-blocking asynchronous uploads from your users' file systems to your dedicated server endpoints.

In this demo, you can see a primary example of using a Blazor FileUpload component within an EditForm. The usage of the component is achieved via the <TelerikUpload> tag with configured addresses for upload and removal, handlers for file selection, saving and canceling of the upload operation. Further, the FileUpload is configured to validate the allowed file extensions—in this case these are limited to only .pdf and .docx extensions. In case users try to upload a different file format and submit the form, a validation error message is displayed to indicate the corrections that need to be made.

In addition to the built-in client-side validation for file size and type, the Upload UI component for Blazor allows custom validation that can take place in the OnSelect event. Please note that for large file uploads, you can use the MaxFileSize parameter only in client-side validation. For the server-side validation, you may need to configure separately the corresponding server parameters (for IIS IIS maxAllowedContentLength, for Kestrel MaxRequestBodySize etc.)

The Telerik Upload for Blazor component also exposes numerous events for handling file selection, upload progress, error handling, canceling, clearing and removing of uploaded files.

This Upload Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.