Best way to use multiple awaits C# .NET Blazor

Question

In a Blazor app I have a file uploader that can take multiple files. When the user clicked 'upload' I used something like this:

private async Task HandleFileUploadClicked()
{
    _isUploading = true;
    StateHasChanged();

    foreach (var file in _files)
    {
        await using var stream = file.OpenReadStream(file.Size);
        await _myService.AddFile(
            stream
        );
    }

    _isUploading = false;

    _files = new List<IBrowserFile>();
    await LoadData();

    StateHasChaged();

}

But I discovered this doesn't work correct. Because I am not using the result of _myService.Addfile the call is just fired and the code continues at _isUploading = false;

Then I thought maybe I should keep an array of the AddFile Tasks and use Task.WaitAll to wait for all of them. But the problem it that this waits on the UI thread, so _isUploading = true; and StateHasChanged have no effect.

My current (working) solution is something like this:

private async Task HandleFileUploadClicked()
{
    _isUploading = true;
    StateHasChanged();
    var allOk = true;

    foreach (var file in _files)
    {
        await using var stream = file.OpenReadStream(file.Size);
        var result = await _myService.AddFile(
            stream
        );
        allOk = result != null && allOk;
    }

    _isUploading = false;

    _files = new List<IBrowserFile>();
    await LoadData();

    StateHasChaged();
}

But this feels like a hack.

Is there a better way to wait for multiple tasks but without blocking the UI thread?

Answer 1

You can make use of Task Parller Library method Task.WhenAll(). Which will make sure that the tasks are processed in parallel. code snippet should be as follows:

bool allOk = true;
try
{
    var uploadtasks = new List<Task>();

    foreach(var file in filesToUpload)
    {
        uploadtasks.Add(_myService.AddFile(file));
    }

    await Task.WhenAll(uploadtasks);
}
catch(Exception ex)
{
    allOk = false;
}