How to Show Progress During File Select

Environment

Product

FileSelect for Blazor

Description

This KB article answers the following questions:

• How to show progress to end users when using the FileSelect component? Users can select a large number of files at once.
• How to display a loading animation when handling bigger files in the FileSelect? The selection process is slow so how to indicate that the process is ongoing?
• How to show users a progress indicator during file selection?

Solution

You can use the Loader. Set the Loader Visible parameter to true in the FileSelect OnSelect event. The Loader will display while the files are being handled, so that the app is more user-friendly.

When you show the Loader in a method, which is blocking the UI thread with synchronous operations, the Loader may not appear when expected. To avoid this, add a small delay, which helps Blazor refresh the UI during the OnSelect handler execution.

Another option is to use the LoaderContainer. The benefit is that it can overlay the whole page or cover part of the page that contains the FileSelect.

<TelerikLoader Visible="@LoaderVisible" />

<TelerikFileSelect OnSelect="@OnSelectHandler" />

@code {
    private bool LoaderVisible { get; set; }

    private async Task OnSelectHandler(FileSelectEventArgs args)
    {
        LoaderVisible = true;

        // allow Blazor to re-render the UI
        await Task.Delay(1);

        foreach (var file in args.Files)
        {
            await HandleFile(file);
        }

        LoaderVisible = false;
    }

    private async Task HandleFile(FileSelectFileInfo file)
    {
        // some long operation here
        await Task.Delay(1000);
    }
}

See Also

• FileSelect Events
• Loader Overview