400 error when submitting Form with multiple selected files-CodePudding

My ASP.NET Core 6 app has a form in which users select two files. When the form is submitted I get a 400 error:

Failed to load response data: No resource with given identifier found.

The form submission works fine if only one file is selected.

I would like to know why this is happening and how to fix.

HTML form:

<form id="submitFileUploadForm" asp-page-handler="FileSelected" method="post" enctype="multipart/form-data">
   <input id="selectFileInput" name="SelectedFiles" asp-for="newLayer.SelectedFiles" type="file" multiple>
</form>

Page Model:

public IActionResult OnPostFileSelected(List<IFormFile> SelectedFiles)
{
    //do something with SelectedFiles
}

Model:

public class NewLayer
{
    public IEnumerable<IFormFile>? SelectedFiles { get; set; }
    //various other properties
}

Submit form handler:

//submit form on file select
$("#selectFileInput").change(function () {
    document.getElementById('submitFileUploadForm').submit()
});

CodePudding user response：

Update

After realising that you had the same issue with the code that I provided, it seems likely it's because of the selected files.

By default ASP.NET Core has a maximum file size upload limit of 30MB, so if you were trying to upload 2x 16MB files, one would work but two wouldn't. You can configure the maximum limit by following Increase upload file size in Asp.Net core

If it helps I made this quick incredibly simple razor page based on the code that you've provided that hopefully you can use to see where you've gone wrong.

Index.cshtml.cs

public class IndexModel : PageModel
{
    public void OnPostFileSelected(IList<IFormFile> SelectedFiles)
    {

    }

    public IEnumerable<IFormFile>? SelectedFiles { get; set; }
}

Index.cshtml

@page
@model IndexModel

<form id="submitFileUploadForm" asp-page-handler="FileSelected" method="post" enctype="multipart/form-data">
    <input id="selectFileInput" name="SelectedFiles" asp-for="SelectedFiles" type="file" multiple>
</form>

@section Scripts {
    <script type="text/javascript">
        $("#selectFileInput").change(function () {
            document.getElementById('submitFileUploadForm').submit()
        });
    </script>
}