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.

The post How to Upload Multiple Files in Angular with ASP.NET Core Web API appeared first on Tech Insights.