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. 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 asRead
,Seek
,Flush
andWrite
. The methods exist, but will throw an exception. A possible workaround is to copy theFileInfoStream
asynchronously to anotherStream
viaCopyToAsync
. TheOnSelect
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 returnvoid
, or asynchronous and returnasync Task
. Do not useasync void
.