Blazor FileSelect Overview

The Blazor FileSelect component helps users select one or multiple files from their local file system.

The Telerik FileSelect for Blazor 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 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Comparison to the 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 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, which has a default maximum message size of 32 KB. To work with larger files, increase the max WebSocket message size for the Blazor application. See these Microsoft articles:

Here is how to configure MaximumReceiveMessageSize in .NET 6 and .NET 5 apps.

Program.cs (.NET 6)

using Microsoft.AspNetCore.SignalR;

var builder = WebApplication.CreateBuilder(args);

//...

// SignalR message size for FileSelect
builder.Services.Configure<HubOptions>(options =>
{
    options.MaximumReceiveMessageSize = 1024 * 1024; // 1MB
});

Startup.cs (.NET 5)

public void ConfigureServices(IServiceCollection services)
{
    //...

    // SignalR message size for FileSelect
    services.Configure<HubOptions>(options =>
    {
        options.MaximumReceiveMessageSize = 1024 * 1024; // 1MB
    });
}

The maximum file size supported by the framework up till .NET 5 is 2 GB and as of .NET 6 this limit is removed. At the time of introducing the component, Telerik UI for Blazor supports .NET versions 3.1.x - 6 and for multi-targeting purposes the FileSelect component allows maximum file size of 2 GB.

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.

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.)
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.

Next Steps

See Also

In this article