FileSelect Initial Files
The Blazor FileSelect component enables you to display specific files in the file list when the component loads for the first time. This is a convenient way to show previously uploaded files.
To configure the initially displayed files, use the Files parameter of the FileSelect—it accepts an IEnumerable<FileSelectFileInfo> collection that stores a set of pre-selected files.
Display initial files in FileSelect's list.
<TelerikFileSelect Files="@InitialFiles" />
@code {
private List<FileSelectFileInfo> InitialFiles { get; set; } = new List<FileSelectFileInfo>()
{
new FileSelectFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 },
new FileSelectFileInfo(){ Id="2", Name="Image", Extension=".jpg", Size = 1024 * 1024 * 4 },
new FileSelectFileInfo(){ Id="3", Name="Picture", Extension=".png", Size = 1024 * 1024 * 3 },
};
}
Persist Selected Files
The Initial Files feature of the FileSelect allows you to save a list of files that the user has selected. Then, you can display them again when the page is reloaded. To achieve this:
1. Store the FileSelectFileInfo records received during the OnSelect event.
1. Load the FileSelectFileInfo records in the FileSelect when the page is loaded.
How to load files and display them initially in the FileSelect
@using System.IO;
@if (InitialFiles != null)
{
<TelerikFileSelect Files="@InitialFiles"
OnSelect="@OnSelect" />
}
@code {
private List<FileSelectFileInfo> InitialFiles { get; set; }
private void OnSelect(FileSelectEventArgs args)
{
foreach (var file in args.Files)
{
//await SaveFileInfo(file); Here, you can store the file information it in a database, text file, or any other desired storage
}
}
protected override async Task OnInitializedAsync()
{
await LoadFiles();
}
private async Task LoadFiles()
{
//Simulate files information loading
await Task.Delay(1000);
InitialFiles = new List<FileSelectFileInfo>()
{
new FileSelectFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 }
};
}
}