.Net 7 API won't accept List<IFormFile>

Question

I have the following method

public async Task<IResult> AddImagesToComponent(ISender sender, int id, List<IFormFile> files)

this is defined as a POST method in the following:

 public override void Map(WebApplication app)
 {
     app.MapGroup(this)
         //.RequireAuthorization()
         .MapGet(GetComponentsWithPagination)
         .MapGet(GetComponentInfo, "GetComponentInfo/{id}")
         .MapPost(CreateComponent)
         .MapPost(UploadComponentBook, "UploadComponentBook/{startPage}")
         .MapPost(AddImagesToComponent, "AddImages/{id}")
         .MapPut(UpdateComponent, "{id}")
         .MapPut(UpdateComponentDetail, "UpdateDetail/{id}")
         .MapDelete(DeleteComponent, "{id}");
 }

when i try to call this from my VueJS application with the following code. The files i try to send are images.

try {
        const formData = new FormData();

        for (const file of files) {
          formData.append("files", file);
        }
        await axios.post(
          "https://localhost:5001/api/Components/AddImages/" +
            this.selectedComponent.id,
          formData,
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        );
      } catch (error) {
        alert(error);
        console.log(error);
      }

i get a 415 unsupported media type response. I tried this from Postman too but i get the same result.

When i try to do this with a single file as IFormFile file it does work.

i have tried it with a IList, ICollection, IFormFileCollection, IFormFile[] but none of these work. I tried to add the [FromForm] attribute to the method but then NSwag starts to act up and give the error:

System.InvalidOperationException: files must have a valid TryParse method to support converting from a string. No public static bool List<IFormFile>.TryParse(string, out List<IFormFile>) method found for files.
1>   at Microsoft.AspNetCore.Http.RequestDelegateFactory.BindParameterFromValue(ParameterInfo parameter, Expression valueExpression, RequestDelegateFactoryContext factoryContext, String source)

Answer 1

Try:

[HttpPost("AddImages")]
public async Task<IResult> AddImagesToComponent(int id, List<IFormFile> files)
{
   //do your staff
}

And the demo like:

 <input type="file" name="file" id="file" multiple />

  ...
try {
    const formData = new FormData();
     $.each($("input[type='file']")[0].files, function(i, file) {
        formData.append('files', file);
    });
    var id= this.selectedComponent.id;
   
    await axios.post(
      "https://localhost:5001/api/Components/AddImages/?id="+id,           
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );
  } catch (error) {
    alert(error);
    console.log(error);
  }

result: