How to Upload Multiple Files in Angular with ASP.NET Core Web API

In this article, we’ll learn How to upload multiple files in angular with ASP.NET Core Web API using the “POST” method with “FormData“. The Post () method of the angular  “HttpClient” object allows you to send data to a REST API, such as Web API which accepts HTTP requests.

Create an Asp.NET Core Web API Project

Assuming you have Visual Studio 2019 or Visual Studio 2022 installed, follow these steps to create a new ASP.NET Core Project.

• Open the visual studio (IDE).
• Click on the “Create new project” option.
• Choose “ASP.NET Core Web Application” from the list of available templates.
• Click the Next button.
• The configure a new project, specify the name and location of your project.
• Click the “Next” button.
• Then select .Net Core as the runtime and choose the version from the dropdown list at the top.
• Make sure to uncheck the checkboxes for “Enable Docker Support” and “Configure for HTTPS” since we won’t be using authentication.
• Click the “Create” button

Create a Controller

Create a controller named “uploadFilesController” in this create public method “upload“. as you can see below code sinnepet.

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace Upload_Multiple_Files.Controllers
{
    
    [Route("api/[controller]")]
    [ApiController]
       
    public class uploadFilesController : ControllerBase
    {
        private IWebHostEnvironment _environment;

        public uploadFilesController(IWebHostEnvironment environment)
        {
            _environment = environment;
            
        }

        [HttpPost]
        [RequestSizeLimit(long.MaxValue)]
        public async Task<IActionResult> upload()
        {
            string uploadpath = _environment.WebRootPath;
            string dest_path = Path.Combine(uploadpath, "uploaded_doc");

            var fromFiles = Request.Form.Files;
            
            dynamic message="";
            if (!Directory.Exists(dest_path))
            {

                Directory.CreateDirectory(dest_path);
            }

            List<string> uploadedFile = new List<string>();

            foreach (var file in fromFiles)
            {
                string sourcefile = Path.GetFileName(file.FileName);
                using (FileStream filestream = new FileStream(Path.Combine(dest_path, sourcefile), FileMode.Create))
                {
                    file.CopyTo(filestream);
                    uploadedFile.Add(sourcefile);
                    message += string.Format("<b>{0}</b> Files Uploaded.<br/>", sourcefile);
                }

            }

            return Ok(message);
        }

    }
}

The next step is to create a new folder “wwwroot” folder inside the project root.

Avoid MultiPartBodyLength Error

To avoid the MultiPartBodyLength error, we are going to modify our configuration in the Program.cs class.

builder.Services.Configure<FormOptions>(f =>
{
    f.ValueLengthLimit = int.MaxValue;
    f.MultipartBodyLengthLimit = int.MaxValue;
    f.MemoryBufferThreshold = int.MaxValue;
});

Enable CORS Policy

With this CORS policy, we are grating access to all origin “AllowAnyOrigin”, allowing any request header “AllowAny Header”, and permitting any HTTP method “AllowAnyMethod”, read more

builder.Services.AddCors(option =>
{
    option.AddPolicy("corsPolicy", policy => {
        policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    
});
});

app.UseCors("corsPolicy");

Here’s a complete Program.cs Class

using Microsoft.AspNetCore.Cors.Infrastructure;
using Microsoft.AspNetCore.Http.Features;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.


builder.Services.Configure<FormOptions>(f =>
{
    f.ValueLengthLimit = int.MaxValue;
    f.MultipartBodyLengthLimit = int.MaxValue;
    f.MemoryBufferThreshold = int.MaxValue;
});

builder.Services.AddControllers();

builder.Services.AddCors(option =>
{
    option.AddPolicy("corsPolicy", policy => {
        policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    
});
});

var app = builder.Build();

// Configure the HTTP request pipeline.


app.UseCors("corsPolicy");

app.UseStaticFiles();
app.UseHttpsRedirection();


app.UseAuthorization();

app.MapControllers();

app.Run();

Create Client App using Angular

To create an Angular project first we need to install Node.js and angular

• Download Node.js installer here https://nodejs.org/en/download/current

After installing angular using the command ‘npm install –g @angular/cli’, create a new angular project named “Upload_Multiple_Files” using the command ‘ng new \Upload_Multiple_Files‘. Next, navigate to the project directory using the command ‘cd ‘.

Create Component

First, we are going to do is to create a new Upload component in which we will handle all the upload-related logic.

ng g component file-upload --skip-tests

Then modify the file “file-upload.component.ts”.

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpEventType } from '@angular/common/http';
 
@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
 msg?: string;
 progressbar:number=0;

 @Output() public UploadCompleted = new EventEmitter();

 constructor(private http:HttpClient){}

  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }

  uploadedFile = (files:any)=>{
    if(files.length===0){
      return;
    }

    let filecollection : File[] =files;
    const formData = new FormData();

    Array.from(filecollection).map((file,index)=>{
      return formData.append('file' + index, file, file.name)
    }); 

    this.http.post('https://localhost:7162/api/uploadfiles',formData, {reportProgress: true, observe:'events'})
      .subscribe({
        next:(event)=>{
          if(event.type === HttpEventType.UploadProgress)
          {  
          if(event?.loaded && event?.total)
            {
          this.progressbar = Math.round(100 * event.loaded / event.total)
            }
          }
          else if (event.type === HttpEventType.Response){
          this.msg = 'Upload successfully completed..!';
          this.UploadCompleted.emit(event.body);
        }
        },
        error: (err:HttpErrorResponse)=> console.log(err)
      });
  }
}

HttpClientModule

Add the “HttpClientModule” in app.module.ts file.

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

Template File

Need to modify the “file-upload.component.html“.

<div class="row" style="margin-bottom: 20px;">
<div class="col-md-3">
    <input type="file" #file placeholder="Select File" (change)="uploadedFile(file.files)" style="display: none;" multiple>
    <button type="button" class="btn btn-primary" (click)="file.click()">Upload Multiple File</button>
</div>
<div class="col-md-4">
    <span class="Upload" *ngIf="progressbar > 0 ">
      {{  progressbar }} %  Successfully Uploaded Files
    </span>
    <span class="Upload" *ngIf="msg">
        {{ msg }} 
        </span>

</div>
</div>

Finally, modify the “file-upload.component.css“.

.Upload{
    font-weight: bold;
    color:maroon;
    margin-left: 20px;
    line-height: 40px;
}

and add the select from the upload component in the app.component.html file.

<app-file-upload></app-file-upload>

Now Run the App.