Blazor Server File Streaming freezes UI

[dotnetspark]

Background

I have a Blazor Server hosting model with an API to download files. It could be fetched from a Azure blob storage or file share. In the Client I have a page with a button that calls the API to download a file. As of now, everything works, but the UX is bad since the UI is frozen until the current download is completed. If the file to download is 1GB, UI will be frozen for a long time. Is there a way to improve this?

Server - File API

[HttpPost]
public async Task<ActionResult> Download([FromBody] FileModel model)
{
    try
    {
        var result = FileService.GetFileStream(model);
        var provider = new FileExtensionContentTypeProvider();
        if (!provider.TryGetContentType(xfRequest.FileFullName, out var contentType))
        {
            contentType = "application/octet-stream";
        }

        return File(result, contentType, xfRequest.FileFullName);
    }
    catch (Exception e)
    {
        // do something
    }
}

Client - index.js

function download(filename, bytesBase64) {
    var link = document.createElement('a');
    link.download = filename;
    link.href = "data:application/octet-stream;base64," + bytesBase64;
    document.body.appendChild(link); // Needed for Firefox
    link.click();
    document.body.removeChild(link);
}

Client - Shared - FileExtensions.cs

public static class FileExtensions
{
    public static async Task Download(this IJSRuntime js, string filename, byte[] data)
    {
        await js.InvokeVoidAsync("download", filename, Convert.ToBase64String(data));
    }
}

Client - Pages - Files

<button class="btn btn-primary" @onclick="Download" text="Download" />

\\ more code here

@code
{
    /* code left out here*/

    private async Task DownloadFile()
    {
        using (var response = await this.Http.PostAsJsonAsync<FileModel>("api/file/download", model))
        {
            var content = await response.Content.ReadAsByteArrayAsync();
            await JS.Download(model.FileName, content);
        }
    }
}

[javiercn]

@ylr-research thanks for contacting us.

I believe the issue you are facing is likely that you are sending a gigantic blob of data from the server to the browser as a string (based on your Client - Shared - FileExtensions.cs code)

We would suggest you break that into multiple JS interop calls and collect the results at the end into a single payload. We are working on a feature that will make this much easier to do. See here for details.

[dotnetspark]

Thanks @javiercn for the quick response.

[dotnetspark]

@javiercn do you happen to know of any POC on how to do it? I'm assuming the API should yield return chunks and once completed I should do the single payload, but have never done that.

[javiercn]

@ylr-research You can check our InputFile component and copy the implementation but do it the other way around, other than that we don't have anything built, that's what we are adding for 6.0

[dotnetspark]

fair enough. Thanks!

[dotnetspark]

@javiercn I know this issue was closed, but I noticed while using my current approach, the file won't go to the Downloads window until finished. Thus, I get no progress.
In contrast, comparing to Dropbox or Google Drive, when you click download -no matter how big the file is-, the file goes to the Downloads window, you see the progress and the UI is free.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.