Upload Files with Angular and .NET Web API

How to create an Angular component for uploading files to a .NET API endpoint

In this article, we will go through details of creating an Angular component for uploading files to a .NET Web API endpoint. The following screen recording shows the demo app.

In the demo app, there’s a file input element with a default file type of *.pdf. The component displays the selected file name and file size. Once a user clicks the Upload button, a progress bar appears and indicates the percentage of the uploading process. After a successful upload, for demo purposes, the component shows the API response JSON object.

You can find the source code in my GitHub repository. We will first briefly take a look at the .NET 5 Web API controller, then shift our focus onto the Angular component for uploading files.

.NET 5 Web API for Uploading a File

In order to implement a file upload endpoint, we can reference my other article (File Upload via Swagger) in which I have described several scenarios for file uploading via .NET web API. In this solution, we will modify the project based on a .NET web template for Angular SPA.

Assume we have a StudentsController, which contains an action method that accepts a StudentForm. The following code snippet shows the definition of the StudentForm class. This class contains an IFormFile StudentFile and some other properties. The StudentFile represents the file that we are going to upload.

The action method accepts requests in the shape of StudentForm. An example implementation of the API endpoint is shown below.