Upload file and Json data in the same POST request using vanilla javascript ajax [ASP.NET Core]

Question

I am trying to send a POST request using vanilla js Ajax, where I would like to upload a file and some json data.

But I am getting "Internal server error: 500" and the controller parameter is null value.

please help me.

my javascript code

var btnSubmit = document.getElementById("btn-submit");
        btnSubmit.addEventListener("click", function () {

            var formData = new FormData();
            var fileElement = document.getElementById("WaterTankBlueprint");
            formData.append("file", fileElement.files[0]);

            var aquaFarm = {
                Name: document.getElementById("Name").value,
                Region: document.getElementById("Region").value,
                CEO: document.getElementById("CEO").value 
            }

            var aquaFarmViewModel = {
                AquaFarm: aquaFarm,
                WaterTankBlueprint: formData 
            };

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === xhr.DONE) {
                    if (xhr.status === 200) {

                    }
                }
            };

            xhr.open("POST", "/workplace/aqua-farm/add", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(aquaFarmViewModel));

        });

my viewmodel

public class AquaFarmViewModel
{
    public AquaFarm AquaFarm { get; set; }

    public IFormFile WaterTankBlueprint { get; set; }

}

my controller

 [HttpPost]
 [Route("workplace/aqua-farm/add")]
 public IActionResult AddAquaFarm([FromBody] AquaFarmViewModel viewModel)
 {
      // ...... code
      return RedirectToAction("AquaFarm");

 }

Answer 1

Here is a working demo like below:

Model:

public class AquaFarmViewModel
{
    public AquaFarm AquaFarm { get; set; }
    public IFormFile WaterTankBlueprint { get; set; }
}

public class AquaFarm
{
    public string Name { get; set; }
    public string Region { get; set; }
    public string CEO { get; set; }
}

View:

<form enctype="multipart/form-data">
    <div>File:<input type="file" id="WaterTankBlueprint" /></div>
    <div>Name:<input id="Name" /></div>
    <div>Region:<input id="Region" /></div>
    <div>CEO:<input id="CEO" /></div>
    <div><input type="button" id="btn-submit" value="Submit" /></div>
</form>
@section Scripts
{
<script>
    var btnSubmit = document.getElementById("btn-submit");
        btnSubmit.addEventListener("click", function () {

            var formData = new FormData();
            var fileElement = document.getElementById("WaterTankBlueprint");
            formData.append("WaterTankBlueprint", fileElement.files[0]);

            formData.append("AquaFarm.Name", document.getElementById("Name").value);
            formData.append("AquaFarm.Region", document.getElementById("Region").value);
            formData.append("AquaFarm.CEO", document.getElementById("CEO").value);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === xhr.DONE) {
                    if (xhr.status === 200) {

                    }
                }
            };

            xhr.open("POST", "/workplace/aqua-farm/add", true);
            xhr.send(formData);

        });
</script>
}

Controller:

[HttpPost]
[Route("workplace/aqua-farm/add")]
public IActionResult AddAquaFarm(AquaFarmViewModel viewModel)
{
    // ...... code
    return RedirectToAction("Index");
}

Result: