Blazor FileSelect Overview
The Telerik UI for Blazor FileSelect component helps users select one or more files from their local file system.
The Blazor FileSelect provides a Stream for each selected file, so that you can manipulate the file in-memory or save (upload) it to the server file system.
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.
FileSelect vs. Upload
The FileSelect and Upload components are similar and even inter-changeable. The major difference is how they communicate with the server and this can determine which component to use.
- The FileSelect is more suitable for WebAssembly apps if you want to receive and manipulate the file in the browser's .NET runtime. Uploading the file to a remote server is optional and depends on manual coding in the
OnSelect
handler. The benefit is that FileSelect allows full control over the upload process. In Blazor Server apps, the FileSelect uses the SignalR WebSocket and large file support (> 32KB) requiresMaximumReceiveMessageSize
configuration. - The Upload uses the HTTP protocol. Prefer this component in Blazor Server and WebAssembly apps to directly send files to a remote endpoint, as HTTP is the usual way to do this. Large file support requires different configurations, depending on the receiving web server.
Creating Blazor FileSelect
- Add the
TelerikFileSelect
tag. - Set
AllowedExtensions
to aList<string>
. - Set
MaxFileSize
in bytes. - If you are using a Blazor Server app and
MaxFileSize
is greater than 32 KB, increase the maximum SignalR message size. - Implement an
OnSelect
event handler.
Steps 2 and 3 are optional, but strongly recommended.
<TelerikFileSelect AllowedExtensions="@AllowedExtensions"
MaxFileSize="@MaxFileSize"
OnSelect="@OnSelectHandler" />
@code {
List<string> AllowedExtensions { get; set; } = new List<string>() { ".docx", ".pdf" };
int MaxFileSize { get; set; } = 1024 * 1024; // 1 MB
async Task OnSelectHandler(FileSelectEventArgs args)
{
foreach (var file in args.Files)
{
var buffer = new byte[file.Stream.Length];
await file.Stream.ReadAsync(buffer);
}
}
}
Large File Support
This section applies only to Blazor Server apps. Blazor WebAssembly apps do not require additional configuration for the FileSelect to work with large files.
In Blazor Server apps, the FileSelect uses the SignalR WebSocket to send files from the browser to the server .NET runtime. The default SignalR maximum message size is 32 KB. To work with larger files, increase the max WebSocket message size for the Blazor application.
The maximum file size supported by the framework up till .NET 5 was 2 GB and .NET 6 removed this limit. While Telerik UI for Blazor supports .NET version 3.1, the FileSelect component will allow maximum file size of 2 GB.
Drag-and-Drop File Support
The FileSelect provides built-in file drag-and-drop support, which allows users to drag one or multiple files and drop them anywhere in the component. The OnSelect
event is raised upon dropping the file. You can handle this event to perform further actions with the selected file.
Additionally, you may define an external drop zone by using the Telerik UI for Blazor DropZone component.
Validation
The FileSelect includes built-in client-side validation for the file size and type (extension). Additional custom validation can take place in the OnSelect event.
Initial Files
The Initial Files feature allows you to display a set of pre-selected files in the FileSelect when the component loads. This functionality is helpful when you want to show files that were previously provided by the user. Read more about the FileSelect Initial Files feature...
Templates
You can use the functionality of the built-in template and modify the appearance of the Select files... button. Read more about the Telerik FileSelect templates...
FileSelect Parameters
The following table lists the FileSelect parameters. Also check the FileSelect API Reference for a full list of properties, methods and events.
Parameter | Type and Default Value | Description |
---|---|---|
Accept |
string |
The accept HTML attribute of the file <input> . It controls what file types and MIME types the browser will allow users to select. Compare with AllowedExtensions . |
AllowedExtensions |
List<string> |
The list of allowed file types. The component will check if the selected files are compliant after selection. Compare with Accept . Read more at Validation. |
Capture |
string |
The capture HTML attribute of the <input type="file" /> element. It enables users to provide a file directly from their device camera. |
Class |
string |
Renders a custom CSS class to the <div class="k-upload"> element. (The FileSelect reuses the Upload HTML rendering.) |
DropZoneId |
string |
The id that is used to connect the FileSelect to an external DropZone. Assign a value matching the Id of the DropZone you are connecting the component with. |
Enabled |
bool ( true ) |
Enables file selection. |
Id |
string |
Renders an id attribute to the <input type="file" /> element. Can be used together with a <label> . |
MaxFileSize |
long? |
Sets the maximum allowed file size in bytes. Read more in the Large File Support section and in the Validation article. |
MinFileSize |
long? |
Sets the minimum allowed file size in bytes. Read more in the Validation article. |
Multiple |
bool ( true ) |
Sets if the user can select several files at the same time. |
Files |
IEnumerable<FileSelectFileInfo> |
Collection of files that will be initially displayed in the FileSelect file list. |
FileSelect Reference and Methods
The File Select exposes methods for programmatic operation. To use them, define a reference to the component instance with the @ref
attribute (example below). The FileSelect methods are:
Method | Description |
---|---|
ClearFiles |
Clears all files from the list. |
OpenSelectFilesDialog |
Shows the browser's file selection dialog. This method doesn't work in Safari due to browser security restrictions. |
<p>
<TelerikButton OnClick="@SelectFiles">Open File Selection Dialog</TelerikButton>
<TelerikButton OnClick="@Clear">Clear File List</TelerikButton>
</p>
<TelerikFileSelect @ref="@FileSelectRef" />
@code {
private TelerikFileSelect FileSelectRef { get; set; }
private void SelectFiles()
{
FileSelectRef.OpenSelectFilesDialog();
}
private void Clear()
{
FileSelectRef.ClearFiles();
}
}