'Axios formData request is empty

so this is my request: enter image description here

And this is my class:

    public class Person
    {
        public string Name { get; set; }

        public IList<IFormFile> Images { get; set; }
    }

My controller:

        [HttpPost("UploadImageWithObject")]
        public async Task<IActionResult> UploadImage([FromForm] Person model)

When i'm sending the data from swagger, everything is working.

My Issue: When i'm sending from axios, it's sending an empty object.

**Form Data:**
{"Name":"vadim","Images":{}}: 

my client side code:

    upload() {
      const files = this.dropzone!.dropzone?.files;

      const formData = new FormData();

      for (var i = 0; i != files.length; i++) {
        formData.append("file", files[i]);
      }

      const person = {
        Name: "vadim",
        Images: formData,
      };

      Axios.post("api/Images/UploadImageWithObject", person, {
        headers: { "content-type": "application/x-www-form-urlencoded" },
      });
    },

Swagger sending images as:

Name: vadim
Images: (binary)

How can i fix this issue? and send name and images to the backend?

  • Note: formData.getAll("file") -> I can see my files


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source