FileSelect Events

This article describes the events and event arguments of the Telerik FileSelect for Blazor:

• OnSelect event
• OnRemove event
• FileSelectFileInfo class

FileSelectFileInfo

The FileSelect event handlers provide a FileSelectEventArgs argument. FileSelectEventArgs has a Files property, which is a List<FileSelectFileInfo> type.

The FileSelectFileInfo type contains the following properties:

Property	Type	Description
Id	string	The unique file identifier.
Name	string	The encoded file name, including the extension. One method to decode it is System.Net.WebUtility.HtmlDecode(). The file can be renamed in the OnSelect event handler.
Size	long	The file size in bytes.
Extension	string	The file extension.
InvalidExtension	bool	A Boolean flag that shows if the file type is invalid.
InvalidMinFileSize	bool	A Boolean flag that shows if file size is below the minimum.
InvalidMaxFileSize	bool	A Boolean flag that shows if the file size exceeds the maximum.
Stream	FileInfoStream	A System.IO.Stream that can be used to load the file to memory, file system, or other. Used for asynchronously getting the file contents as a byte array.

Due to the Blazor framework limitations, FileInfoStream does not support synchronous operations such as Read, Seek, Flush, and Write. The methods exist, but will throw an exception. A possible workaround is to copy the FileInfoStream asynchronously to another Stream with CopyToAsync, as demonstrated by the OnSelect event example below.

OnSelect

The OnSelect event fires each time when the user selects file(s) through the Select Files button or by drag and drop anywhere in the component.

The event handler receives a FileSelectEventArgs object. If you set its IsCancelled property to true, the component ignores the user action and all newly selected files do not appear in the component file list.

OnSelect fires for both valid and invalid files. You can verify if the file is valid by checking the validation-related properties of each FileSelectFileInfo object. If necessary, the application can still handle invalid files, for example, read their content.

See the example below.

OnRemove

The OnRemove event fires when the user deletes a file from the list by clicking the x icon or by pressing the Del key.

The event handler receives a FileSelectEventArgs object. The Files collection in the event argument always contains a single FileSelectFileInfo object. This is unlike the OnSelect event where Files can include one or more files.

OnRemove fires for both valid and invalid files.

Example

Handle the FileSelect OnSelect and OnRemove events

@using System.Threading

@*This code works only in Blazor Server apps.*@
@*@using Microsoft.AspNetCore.Hosting*@
@*@inject IWebHostEnvironment HostingEnvironment*@

@* Avoid namespace conflict with SvgIcons.File *@
@using IONS = System.IO


<TelerikFileSelect AllowedExtensions="@AllowedExtensions"
                   OnRemove="@OnFileRemove"
                   OnSelect="@OnFileSelect">
</TelerikFileSelect>

<div class="k-form-hint">
    Expected files: &nbsp; <strong>@string.Join(", ", AllowedExtensions)</strong>
</div>

@code {
    private readonly List<string> AllowedExtensions = new() { ".gif", ".jpg", ".jpeg", ".png", ".svg" };

    private Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new();

    private async Task OnFileSelect(FileSelectEventArgs args)
    {
        foreach (var file in args.Files)
        {
            if (file.InvalidExtension || file.InvalidMaxFileSize || file.InvalidMinFileSize)
            {
                // Skip invalid files.
                continue;

                // OR

                // Cancel all files, but refactor the handler to iterate and validate all files before reading any of them.
                //args.IsCancelled = true;
                //return;
            }

            // Read file in-memory.
            await ReadFile(file);

            // OR

            // Save to local file system.
            // This works only in server apps and the Upload component may be a better choice.
            //await UploadFile(file);
        }
    }

    private async Task ReadFile(FileSelectFileInfo file)
    {
        Tokens.Add(file.Id, new CancellationTokenSource());
        byte[] byteArray = new byte[file.Size];
        await using IONS.MemoryStream ms = new(byteArray);
        await file.Stream.CopyToAsync(ms, Tokens[file.Id].Token);
    }

    private async Task UploadFile(FileSelectFileInfo file)
    {
        // This code works only in Blazor Server apps.
        // Saving files on the user device is not allowed in WebAssembly apps.

        //Tokens.Add(file.Id, new CancellationTokenSource());
        //string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);
        //await using FileStream fs = new FileStream(path, FileMode.Create);
        //await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
    }

    private async Task OnFileRemove(FileSelectEventArgs args)
    {
        foreach (var file in args.Files)
        {
            // If you're still uploading the file, cancel the process first.
            Tokens[file.Id].Cancel();
            Tokens.Remove(file.Id);

            await Task.Delay(1);

            // This code works only in Blazor Server apps.
            // Saving files on the user device is not allowed in WebAssembly apps.

            //string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);

            //if (IONS.File.Exists(path))
            //{
            //    // Remove the file from the file system
            //    IONS.File.Delete(path);
            //}
        }
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

See Also

• Live Demo: Blazor FileSelect Events
• Telerik UI for Blazor FileSelect Overview
• Blazor FileSelect Validation