FileSelect Events
This article describes the events and event arguments of the Telerik FileSelect for Blazor:
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 theOnSelectevent 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.Streamthat 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,
FileInfoStreamdoes not support synchronous operations such asRead,Seek,Flush, andWrite. The methods exist, but will throw an exception. A possible workaround is to copy theFileInfoStreamasynchronously to anotherStreamwithCopyToAsync, as demonstrated by theOnSelectevent 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
OnSelectandOnRemoveevents
@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:   <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 returnvoid, or asynchronous and returnasync Task. Do not useasync void.