This is 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);
}

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

this.uploadService.uploadFiles(formData)

ASP.NET Core Web API 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 are 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 am missing?

Thank you

This is 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);
}

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

this.uploadService.uploadFiles(formData)

ASP.NET Core Web API 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 are 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 am missing?

Thank you

• angular
• asp-core-webapi

• In .Net core api, using List<IFormFile> is correct accept several files. See this document, and I find this case which said in document that "code in the loop should be for(let file of item) instead of for(let file in item) to loop the values of files". Could you pls try it? – Tiny Wang Commented Apr 2 at 1:59
• 2 Could you pls try for (let file of this.supportDocuments) {formData.append("files", file, file.name);} ? – Tiny Wang Commented Apr 2 at 2:15
• 1 Have you tried using IFormFileCollection instead of List<IFormFile>? – Yong Shun Commented Apr 2 at 2:55
• Thanks for coming back and sharing the test result : ) but may I know whether you used formData.append("files", file, file.name);? As IFormFileCollection binds to all files in the form, even if they’re sent under different or multiple form field names (e.g., name="file", name="uploads", or name="files"). But if you used formData.append("files", file, file.name); List should work. @HoangMinh – Tiny Wang Commented Apr 2 at 4:12

2 Answers 2

I got it working. There are two things that I was missing:

1. Thanks to @Tiny Wang: the for loop has to be used with of and not in.

.ts

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

this.uploadService.uploadFiles(formData)

2. @Yong Sun suggested to use IFormFileCollection and it works, not sure why List does not, even though it is documented on Microsoft page.

routeBuilder.MapPost("api/cancellationforms/upload", 
    (IFormFileCollection files, 
    [FromServices] IServiceManager serviceManager, 
    CancellationToken cancellationToken) =>
{
    // Iterate each file if needed
    foreach (IFormFile file in files)
    {

    }

    return Results.Ok("Hello");
})

You may try working with IFormFileCollection instead of List<IFormFile> type and without the [FromForm] attribute.

routeBuilder.MapPost("api/cancellationforms/upload", 
    (IFormFileCollection files, 
    [FromServices] IServiceManager serviceManager, 
    CancellationToken cancellationToken) =>
{
    // Iterate each file if needed
    foreach (IFormFile file in files)
    {

    }

    return Results.Ok("Hello");
})