Skip to content

Server closes connection for files > ~23K, when trying to upload via JsRuntime.InvokeAsync<string>( #7884

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
TerryFogg opened this issue Feb 23, 2019 · 2 comments
Closed

Server closes connection for files > ~23K, when trying to upload via JsRuntime.InvokeAsync<string>( #7884

TerryFogg opened this issue Feb 23, 2019 · 2 comments

Comments

@TerryFogg
Copy link

TerryFogg commented Feb 23, 2019 •
edited
Loading

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:

  1. 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.'.
@enetstudio
Copy link

Perhaps the following can help you:
https://github.com/aspnet/Blazor/issues/1614#issuecomment-433983017
#5623

@TerryFogg
Copy link
Author

Thanks, the information in that discussion explains the problem, and the error message that is not that helpful

@QadiymStewart QadiymStewart mentioned this issue Apr 19, 2019
Closed
@ghost ghost locked as resolved and limited conversation to collaborators Dec 3, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@TerryFogg @enetstudio