IFormFile is null when Form in Razor Page submitted by JavaScript code

0
votes

When I submit Form in a Razor Page by click on Submit button, IFormFile send to OnPost action method properly. But if I submit the Form by JavaScript code, IFormFile is null in OnPost action method, other model members are not null.

Model

public string Applicant { get; set; }  
public List<IFormFile> FormFiles { get; set; }

Form

<form method="post" name="ApplicantForm" enctype="multipart/form-data">
    <input asp-for="@Model.ApplicantModel.Applicant" />
    <input type="file" asp-for="@Model.ApplicantModel.FormFiles" multiple />
    <button type="submit" id="btnSubmit">Submit</button>
    <button type="button" onclick="doSomethingBeforeSubmit()">Do Something Before Submit</button>
</form>

JavaScript

function doSomethingBeforeSubmit() {
    // Do something before submitting the form ...
    .
    .

    document.forms["ApplicantForm"].submit();
     // Or
    document.getElementById("btnSubmit").click();
}

OnPost action method

[BindProperty]
public ApplicantModel ApplicantModel { get; set; } 
public async Task<IActionResult> OnPostAsync()
{
     ApplicantModel.Applicant // OK, Always .. 
     ApplicantModel.FormFiles // OK, if form submitted by click on Submit button.
     ApplicantModel.FormFiles // Null, if form submitted by JavaScript code.    
}

What is the right way to submit a form by JavaScript code in Razor Page with IFormFile in model?

.NET 6, Visual Studio 2022, ASP.NET Core Web App (Razor Pages)

javascriptc#razorrazor-pagesiformfile