Multiple files upload hangs the process in a blazor server app
- 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
Assessment
This issue has not been assessed yet.