Uploading Multiple Files with Angular and .NET Web API

How to upload multiple files through one HTTP request to an API endpoint

I wrote an article entitled Upload Files with Angular and .NET Web API recently. To continue on this subject, in this article I will show you the details of creating an Angular component to upload multiple files within one HTTP request to an API endpoint. The demo app works as the following screen recording shows.

In the following sections, we will write code for an action method and an Angular component for uploading multiple files. The implementation is quite similar to the code we wrote for uploading a single file, so we will focus on the differences.

If you want to jump to the code directly, you can find the complete solution in my GitHub repository.

.NET 5 Web API for Uploading Multiple Files

In order to make the API endpoint accept multiple files, we simply need to program the action method to take an input parameter with the type of List<IFormFile>. For example, the following action method accepts a list of files representing a student’s certificates.

In this simple example, we only deal with form files. If you want to pass additional form data entries together with the files to the API endpoint, then you can create a class to model a FormData object, which includes a property with the type of List<IFormFile> (representing the files) and other properties (representing the other form data entries).

I think the code is self-explanatory. If we add Swagger support to the Web API project, then we can try it out in the Swagger UI webpage. The following screen recording shows the action.