Blazor FileSelect - Overview

Drag and drop files here
Expected files: DOCX, PDF, JPG, PNG between 1KB and 4MB.
  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The FileSelect 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 Telerik UI for Blazor FileSelect component allows users to select files from their local devices. It offers a rich event list to accommodate security information, application logic and file validation.

To use the Telerik FileSelect component in Blazor applications, you need to add the <TelerikFileSelect> tag, set the allowed extensions in the AllowedExtensions parameter to a List <string>, set the MaxFile size in bytes and implement the OnSelect event handler. In this demo, you can see a primary example of using a FileSelect component that limits the allowed file extensions to .DOCX, .PDF, .JPG, .PNG and the size to min = 1KB and max = 4MB. Please note that if you want to validate the files when uploading, you should implement the validation on both the client and server sides. The client validation is performed by the Telerik FileSelect component, while the server validation must be implemented in the application endpoints. Also, if you are developing Blazor Server apps, be informed that the FileSelect uses the SignalR WebSocket and large file support (> 32KB) requires MaximumReceiveMessageSize configuration.

The Telerik FileSelect for Blazor provides a Stream for each selected file, so that you can manipulate the file in-memory, save it to the file system or send it to another destination. The component exposes OnSelect and OnRemove events that fire when one or multiple files have been selected/de-selected. Furthermore, you can take advantage of the multiple properties within the FileSelectFileInfo class to pass their values in the FileSelectEventArgs event argument.

This FileSelect 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.