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.

Telerik UI for Blazor 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.

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) requires MaximumReceiveMessageSize 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

  1. Add the TelerikFileSelect tag.
  2. Set AllowedExtensions to a List<string>.
  3. Set MaxFileSize in bytes.
  4. If you are using a Blazor Server app and MaxFileSize is greater than 32 KB, increase the maximum SignalR message size.
  5. Implement an OnSelect event handler.

Steps 2 and 3 are optional, but strongly recommended.

Using the FileSelect

<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>.
MinFileSize int? Sets the minimum allowed file size in bytes. Read more at Validation.
MaxFileSize int? Sets the maximum allowed file size in bytes. Read more at Validation.
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.

Get reference to the FileSelect and execute methods

<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();
    }
}

Next Steps

See Also

In this article