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. It has a Files property, which is a List<FileSelectFileInfo>.

The FileSelectFileInfo type contains these properties:

Property	Type	Description
Id	string	the unique file identifier
Name	string	the file name
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. Use it to asynchronously get the file contents as byte array.

Due to 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 via CopyToAsync. The OnSelect event example below demonstrates this.

OnSelect

The OnSelect fires when one or multiple files have been selected through the Select files button. Contains a list of fileInfo objects, allowing processing of the files.

The event handler receives a FileSelectEventArgs object.

Handle the OnSelect event of the FileSelect

@*Handle the OnSelect event of the FileSelect to access the selected files and upload them*@

@using System.IO
@using Microsoft.AspNetCore.Hosting
@using System.Threading
@using Telerik.Blazor.Components.FileSelect

@inject IWebHostEnvironment HostingEnvironment

<div style="width:300px">
    <TelerikFileSelect OnSelect=@HandleFiles
                       AllowedExtensions="@AllowedExtensions">
    </TelerikFileSelect>
    <div class="k-form-hint">
        Expected files: <strong>JPG, PNG, GIF</strong>
    </div>
</div>

@code {
    public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
    public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();

    private async Task HandleFiles(FileSelectEventArgs args)
    {
        foreach (var file in args.Files)
        {
            if (!file.InvalidExtension)
            {
                // save to local file system
                await UploadFile(file);
                // or read file in-memory
                //await ReadFile(file);
            }
        }
    }

    private async Task UploadFile(FileSelectFileInfo file)
    {
        Tokens.Add(file.Id, new CancellationTokenSource());
        var 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 ReadFile(FileSelectFileInfo file)
    {
        Tokens.Add(file.Id, new CancellationTokenSource());
        var byteArray = new byte[file.Size];
        await using MemoryStream ms = new MemoryStream(byteArray);
        await file.Stream.CopyToAsync(ms, Tokens[file.Id].Token);
    }
}

OnRemove

The OnRemove fires when a file has been removed from the list of selected files (by clicking the x icon or pressing Del key).

The event handler receives a FileSelectEventArgs object. As the FileSelect component allows deleting one item at a time, the collection contains only one FileSelectFileInfo object (the deleted one).

Handle the OnRemove event of the FileSelect

@*Handle the OnRemove event of the FileSelect to access and delete the uploaded files*@

@using System.IO
@using Microsoft.AspNetCore.Hosting
@using System.Threading
@using Telerik.Blazor.Components.FileSelect

@inject IWebHostEnvironment HostingEnvironment

<div style="width:300px">
    <TelerikFileSelect OnRemove=@HandleRemoveFiles
                       AllowedExtensions="@AllowedExtensions">
    </TelerikFileSelect>
    <div class="k-form-hint">
        Expected files: <strong>JPG, PNG, GIF</strong>      
    </div>
</div>

@code {
    public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
    public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();

    private async Task HandleRemoveFiles(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);

            var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);

            // Remove the file from the file system
            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: FileSelect Events
• FileSelect Overview
• FileSelect Validation