How to send post request to upload multiple files from Angular to .Net web api?

My angular service:

uploadFiles(formData: FormData) {

const headerOptions = {
headers: new HttpHeaders({
'X-CSRF-TOKEN': token
})
};


return this.httpClient
.post<string>(`${this.configurationService.apiUrl}/cancellationforms/upload`, formData, headerOptions);
}


.ts

//
for (let file in this.supportDocuments) {
// file is a blob object
formData.append("files", file);
}

this.uploadService.uploadFiles(formData)


webapi endpoint

routeBuilder.MapPost("api/cancellationforms/upload", ([FromForm] List<IFormFile> files, [FromServices] IServiceManager serviceManager, CancellationToken cancellationToken) =>
{


return Results.Ok("Hello");
})
.WithName("CreateCancellationFormUpload")
.WithOpenApi();


The files from the endpoints is always null if I use List. If I remove List, it will have the value of the latest blob object that I append in the UI.

Can anyone tell me what I' missing ?

Thank you

Continue reading...