Server closes connection for files > ~23K, when trying to upload via JsRuntime.InvokeAsync<string>( #7884
Description
Describe the bug
While implementing a test program to upload files using server side Razor Components, any file that is greater than about 23K closes the server connection. The connection does not restart and requires restart of the program.
To Reproduce
Steps to reproduce the behavior:
- Using
ASP.NET Core Blazor Language Services 0.8.0-preview-19104-04
Visual Studio 2019 Preview 2
Razor Component source
UploadFileTest.cshtml
@page "/UploadFileTest"
@using Microsoft.JSInterop;
@inject IJSRuntime JsRuntime;
<h1>@Filename</h1>
<h2>Data length = @dataLength</h2>
<p>@data</p>
<input type="file" onchange="@FileSelected" id="fileUpload" />
@if (fileIsSelected)
{
<button class="btn btn-primary" onclick="@UploadFile">Upload File</button>
}
@functions
{
bool fileIsSelected = false;
int dataLength = 0;
string Filename = "Blank";
string data;
async Task FileSelected()
{
string text = await JsRuntime.InvokeAsync<string>("GetFileName");
Filename = text;
fileIsSelected = true;
StateHasChanged();
}
async Task UploadFile()
{
data = await JsRuntime.InvokeAsync<string>("readFileToUpload");
if (data != null)
{
dataLength = data.Length;
StateHasChanged();
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Standards</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script>
window.GetFileName = () => {
return document.querySelector('input[type=file]').files[0].name;
}
async function readFileToUpload() {
var file = document.querySelector('input[type=file]').files[0];
const fileContents = await readFileAsText(file);
console.log(fileContents);
return fileContents;
}
window.readFileAsText = (inputFile) => {
const temporaryFileReader = new FileReader();
return new Promise((resolve, reject) => {
temporaryFileReader.onerror = () => {
temporaryFileReader.abort();
reject(new DOMException("Problem parsing input file."));
};
temporaryFileReader.onload = () => {
resolve(temporaryFileReader.result);
};
temporaryFileReader.readAsDataURL(inputFile);
// temporaryFileReader.readAsBinaryString(inputFile);
// temporaryFileReader.readAsText(inputFile);
});
};
</script>
</head>
<body>
<app>Loading...</app>
<script src="_framework/components.server.js"></script>
<script src="/UploadFile.js"></script>
<!--<script src="/ConvertArray.js"></script>-->
</body>
</html>
Expected behavior
===================
Base 64 encoded data is created by the browser and can be seen in the console via the
console.log(fileContents);
The file contents are successfully transferred for files that are smaller than about 23K bytes as sized on the disk.
Error
System.InvalidOperationException: Advancing examined to the end would cause pipe to deadlock because FlushAsync is waiting.
at System.IO.Pipelines.ThrowHelper.ThrowInvalidOperationException_BackpressureDeadlock()
at System.IO.Pipelines.Pipe.AdvanceReader(BufferSegment consumedSegment, Int32 consumedIndex, BufferSegment examinedSegment, Int32 examinedIndex)
at System.IO.Pipelines.Pipe.AdvanceReader(SequencePosition& consumed, SequencePosition& examined)
at System.IO.Pipelines.Pipe.DefaultPipeReader.AdvanceTo(SequencePosition consumed, SequencePosition examined)
at Microsoft.AspNetCore.SignalR.HubConnectionHandler1.DispatchMessagesAsync(HubConnectionContext connection) at Microsoft.AspNetCore.SignalR.HubConnectionHandler1.RunHubAsync(HubConnectionContext connection)
Information: Close message received from server.
Microsoft.AspNetCore.Hosting.Internal.GenericWebHostService: Information: Request finished in 58219.6816ms 101
Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'.