Angular 14 File Upload Example Tutorial

Hello,

I am going to show you example of angular 14 file upload with reactive forms. let’s discuss about file upload in angular 14 example. you will learn angular 14 httpclient upload file. We will look at example of angular 14 file upload with web api. Let's get started with how to file upload in angular 14.

In this example, I want to share with you how to file upload with form data in angular 14. we will see an example of angular 14 reactive form file upload. we will use the reactive form with file upload in angular 14 step by step. I also created an API for storing files in a folder using PHP for angular 14 file upload.

Here, we will simply create a reactive form using formGroup. input file onchange event we will add the file to another formgroup element. then after clicking on submit button, we will call web API to store that files on the server.

I written step by step file uploading with angular 14 application, also created web services using php. so let's follow bellowing step and get preview like as bellow:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new my-new-app

Step 2: Import Module

In this step, we need to import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file. so let's import it as like bellow:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Updated View File

Now here, we will updated our html file. we will create simple reactive form with input file element.

In this file i used bootstrap 5 class, if you want to use bootstrap then you can follow this link: Install Bootstrap 5 in Angular 14

so let's put bellow code:

src/app/app.component.html

<h1>Angular 14 File Upload Tutorial Example - ItSolutionStuff.com</h1>
         
<form [formGroup]="myForm" (ngSubmit)="submit()">
    
    <div class="form-group">
        <label for="name">Name</label>
        <input 
            formControlName="name"
            id="name" 
            type="text" 
            class="form-control">
        <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
            <div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>
            <div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
        </div>
    </div>
        
    <div class="form-group">
        <label for="file">File</label>
        <input 
            formControlName="file"
            id="file" 
            type="file" 
            class="form-control"
            (change)="onFileChange($event)">
        <div *ngIf="f['file'].touched && f['file'].invalid" class="alert alert-danger">
            <div *ngIf="f['file'].errors && f['file'].errors['required']">File is required.</div>
        </div>
    </div>
            
    <button class="btn btn-primary" [disabled]="myForm.invalid" type="submit">Submit</button>
</form>

Step 4: Use Component ts File

Now we need to update our component.ts file with formGroup and formControl element.

i used my local api file url 'http://localhost:8001/upload.php', you can use your api there.

so, let's update as like bellow:

src/app/app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators} from '@angular/forms';
      
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  /*------------------------------------------
  --------------------------------------------
  Declare Form
  --------------------------------------------
  --------------------------------------------*/
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    file: new FormControl('', [Validators.required]),
    fileSource: new FormControl('', [Validators.required])
  });
  
  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(private http: HttpClient) { }
  
  /**
   * Write code on Method
   *
   * @return response()
   */
  get f(){
    return this.myForm.controls;
  }
  
  /**
   * Write code on Method
   *
   * @return response()
   */
  onFileChange(event:any) {
  
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.myForm.patchValue({
        fileSource: file
      });
    }
  } 
  
  /**
   * Write code on Method
   *
   * @return response()
   */
  submit(){
    const formData = new FormData();
    formData.append('file', this.myForm.get('fileSource')?.value);
     
    this.http.post('http://localhost:8001/upload.php', formData)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }
}

Now we are ready to run our example, we will create api file using php. so you can create update.php file with "upload" folder and run with different port and call it. so let's create upload.php file as like bellow:

upload.php

<?php
  
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: PUT, GET, POST");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
        
    $folderPath = "upload/";
   
    $file_tmp = $_FILES['file']['tmp_name'];
    $file_ext = strtolower(end(explode('.',$_FILES['file']['name'])));
    $file = $folderPath . uniqid() . '.'.$file_ext;
    move_uploaded_file($file_tmp, $file);
   
?>

Run PHP & Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

Run Angular App:

ng serve

Run PHP API:

php -S localhost:8001

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Now you can run and check it.

I hope it can help you...