dotnet / dotnet/aspnetcore

Multiple files upload hangs the process in a blazor server app

Open
#47,301 15 comments 7 reactions 0 assignees View on GitHub
area-blazor bug Priority:3
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Describe the bug

I have a Blazor Server app which is calling an API to upload multiple images. With, one or more images selected using InputFile control, it always works:

1. When a single file is uploaded, no matter what the size is (I am trying images of up to 10MB atm)
2. When two or more images are selected and total size of all images is less than 1MB

And it doesnt work:

1. Two or more images are selected, with each image size greater than or equal to 2MB. The request made through HttpClient just dies away (it never reaches the API Controller).

Here is the code for anyone who wants to quickly reproduce the issue:

Index.Razor
```razor
@page "/"
@using System.Net.Http.Headers
@inject HttpClient _httpClient

Index

Upload

@code{
private IReadOnlyList? _images;

private async Task LoadFiles(InputFileChangeEventArgs e)
{
_images = e.GetMultipleFiles();
}

private async Task UploadFiles()
{
const long maxFileSize = 1024 * 1024 * 300;
_httpClient.Timeout = TimeSpan.FromMinutes(10);
var uri = "https://localhost:7112/Files";
using var content = new MultipartFormDataContent();

foreach (var file in _images)
{
var fileContent = new StreamContent(file.OpenReadStream(maxFileSize));
fileContent.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);
content.Add(fileContent, "files", file.Name);
}

var response = await _httpClient.PostAsync(uri, content);

}

}
```

and here is the controller:
```csharp
[HttpPost]
public void Upload([FromForm] IEnumerable files)
{
var count = files.Count();
//Do something with files
}`

In the API project, I have tried doing this:
`builder.WebHost.UseKestrel(options =>
{
options.Limits.MaxRequestBodySize = null;
});
```

and in the Blazor Server project, tried this:
```csharp
builder.Services.AddServerSideBlazor(options =>
{
options.DetailedErrors = true;
options.DisconnectedCircuitMaxRetained = 100;
options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(3);
options.JSInteropDefaultCallTimeout = TimeSpan.FromMinutes(10);
options.MaxBufferedUnacknowledgedRenderBatches = 10;
}).AddHubOptions(options =>
{
options.ClientTimeoutInterval = TimeSpan.FromMinutes(10);
options.EnableDetailedErrors = true;
options.HandshakeTimeout = TimeSpan.FromSeconds(15);
options.KeepAliveInterval = TimeSpan.FromSeconds(15);
options.MaximumParallelInvocationsPerClient = 1;
options.MaximumReceiveMessageSize = 32 * 1024 * 1024;
options.StreamBufferCapacity = 33554432;
});
```

Nothing seems to work. Not sure it is a bug or I am missing something very obvious. I appreciate any help. Thanks,

### Expected Behavior

All files should be successfully posted to backend API, no matter what the size of each file is.

### Steps To Reproduce

_No response_

### Exceptions (if any)

_No response_

### .NET Version

.NET 7

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.