Upload Files and Model Data with Angular and .NET Core Web API to Single Endpoint

Are you looking to add file upload functionality and model data to your web application using Angular and .NET Core Web API? In this tutorial, we’ll show you how to do just that, by uploading files and model data to a single endpoint using Angular and .NET Core Web API.

Set Up the Project

Let’s learn step by step how to Upload Files and Model Data with Angular and .NET Core Web API.

To get started, create a new project in Visual Studio using the ASP.NET Core Web Application template. Choose the API option and enable HTTPS for added security. Next, create a new Angular project using the Angular CLI.

Create the Web API Endpoint

In the .NET Core Web API project, create a new controller to handle the file and model data upload. Use the [FromForm] attribute to bind the data to the model. You can use the [DisableRequestSizeLimit] attribute to allow for larger file uploads.

Create the Angular Component

In the Angular project, create a new component to handle the file and model data upload. Use the FormData class to append the file and model data to the HTTP request. Use the HttpClient to make the HTTP request to the Web API endpoint.

Test the File and Model Data Upload

Test the file and model data upload by running both projects and using the Angular component to upload a file and model data to the Web API endpoint.

Code Sample

Angular Code 

 formData = new FormData();//declare this variable

<form [formGroup]="form" (ngSubmit)="Submit($event.target.files)">
    <div class="form-group">
        <!-- <label for="file">Choose File: </label>&nbsp; -->
        <input type="file" #myInput formControlName="productImage" id="file" required class="form-control"
            (change)="handleFileInput($event.target)">
    </div>

</form>

public handleFileInput(data: any): void {
    this.formData = new FormData();
      const files = data.files as File[];          
      Array.from(files).forEach((f) => this.formData.append('image', f));      
  }

 getFormData(){
      const model = this.getModel();
      this.formData.append('firstName','John');
      this.formData.append('lastName','M');
      return this.formData;
  }

onSubmit(){
const formDataModel=this.getFormData();
this.service.upload(formDataModel)..subscribe({
        complete: () => {
          this.onComplete();
        }, // completeHandler
        error: (errorRes: HttpErrorResponse) => {
          this.onError(errorRes);
        }, // errorHandler
        next: () => {
          this.onSaveComplete();
        }, // nextHandler
      });
}

   public class UploadModel
    {
        public IFormFile Image { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
	
	[HttpPost] //It can be HttpPut as well, depending on your need
	[AllowAnonymous]
	public IActionResult Upload([FromForm] UploadModel model)
	{
	   // Do logic here
	   //model.Image will have image
		return Ok(model);
	}

Video Tutorial for better understanding

Source Code: Project Example

1. Essential Product API – DOTNET CORE WEB API project using version 3.1. You can also use.Net 6 or above
2. Essential Products Angular App – Angular App developed using 14 version

By following these steps, you can add file upload functionality and model data to your web application using Angular and .NET Core Web API. Give it a try and see how it works for you!