How to send post request to upload multiple files from Angular to ASP.NET Core Web API? - Stack Overflow

admin管理员组

文章数量:1353284

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

Share Improve this question Follow edited Apr 2 at 4:13 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Apr 2 at 1:25 Hoang MinhHoang Minh 1,26222 gold badges2424 silver badges4949 bronze badges 4

• 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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");
})

本文标签： How to send post request to upload multiple files from Angular to ASPNET Core Web APIStack Overflow