Uploading Multiple Files with Angular and .NET Web API

Uploading Multiple Files with Angular and .NET Web API

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

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

Iwrote 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.

Image for post

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.

[HttpPost("{id:int}/certificates")]
[RequestSizeLimit(long.MaxValue)]
public async Task<ActionResult> SubmitCertificates(int id, [Required] List<IFormFile> certificates)
{
    if (certificates == null || certificates.Count == 0)
    {
        return BadRequest("No file is uploaded.");
    }

    foreach (var certificate in certificates)
    {
        var filePath = ...; // determine the destination for file storage
        await using var stream = new FileStream(filePath, FileMode.Create);
        await certificate.CopyToAsync(stream);
    }

    return Ok();
}

programming javascript angular

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Updating From Angular 10 to Angular 11

Updating from Angular 10 to Angular 11. In 2020, Angular received three stable update (Version 9, 10, and 11,) each introducing a few significant changes. We’ll focus on the last two, Angular 10 and Angular 11, the rule is currently facing issues, especially for packages like update @angular/core.

How to Use JavaScript Libraries in Angular Project

In this tutorial, you'll learn how to use JavaScript libraries in Angular project. Using a JavaScript library inside an Angular project is not as straightforward as using it in Angular JS or a plain JavaScript project.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.