Unable to transmit a large byte array from the server to the client in Blazor

[sathiyaseelanksf3503]

Describe the bug

An exception occurred with the message 'A task was canceled' while attempting to send a PDF file's byte array from the server to the client in Blazor, after retrieving the file from the root folder.

To Reproduce

To reproduce the issue, follow the below steps using this sample.

• Run the sample.
• Click the "Load Large PDF" button.
• Exception occurred.

Code Snippet

Server-side code

@page "/"
@inject IJSRuntime JS
@inject IWebHostEnvironment Env

<button @onclick="LoadLargeFile">Load Large Pdf</button>

@code {
    private DotNetObjectReference<Home>? objRef;

    public void LoadLargeFile()
    {
        LoadPdf("200MB_File.pdf");
    }

    public async void LoadPdf(string fileName)
    {
        var filePath = Path.Combine(Env.WebRootPath, "files", fileName);
        byte[]? fileBytes = await File.ReadAllBytesAsync(filePath);
        await JS.InvokeVoidAsync("pdfInterop.receivePdfBytes", fileBytes, objRef);
        fileBytes = null;
    }
}

Client-side code

window.pdfInterop = {
    receivePdfBytes: function (byteArray, dotNetRef) {
        // Create a Blob and open as PDF
        const blob = new Blob([byteArray], { type: 'application/pdf' });
        const url = URL.createObjectURL(blob);
        window.open(url, '_blank');
    }
};

Exceptions (if any)

Further technical details

• I'm using the VS windows.
• Also using the Dot net 8.0.

[javiercn]

@sathiyaseelanksf3503 thanks for contacting us.

Very likely what's happening is that your send is that the call is taking too long and the server is cancelling the interop call.

You should send a dotnet stream reference instead
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-9.0#stream-from-net-to-javascript

[dotnet-policy-service]

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.