In this tutorial, we will learn how to upload image with preview in angular 11 app.

As well as, this tutorial will guide us step by step on how to upload image in angular 11. And also use reactive form with formGroup to upload image with preview.

Image Upload with Preview in Angular 11 Reactive Form

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Import Module

Then, Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:

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

Step 3 – Add Code on View File

In this step, create simple reactive form with input file element and image tag. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 11 Image Upload with Preview</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 &amp;&amp; f.name.invalid" class="alert alert-danger">
            <div *ngIf="f.name.errors.required">Name is required.</div>
            <div *ngIf="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 &amp;&amp; f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors.required">File is required.</div>
        </div>
    </div>
     
    <img [src]="imageSrc" *ngIf="imageSrc" style="height: 300px; width:500px">
         
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

Step 4 – Use Component ts File

In this step, open the file app.component.ts. Then add the following code. We import formGroup and formControl element on component.ts file:

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 {
   imageSrc: string;
   myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    file: new FormControl('', [Validators.required]),
    fileSource: new FormControl('', [Validators.required])
  });
   
  constructor(private http: HttpClient) { }
     
  get f(){
    return this.myForm.controls;
  }
    
  onFileChange(event) {
    const reader = new FileReader();
     
    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);
     
      reader.onload = () => {
    
        this.imageSrc = reader.result as string;
      
        this.myForm.patchValue({
          fileSource: reader.result
        });
    
      };
    
    }
  }
    
  submit(){
    console.log(this.myForm.value);
    this.http.post('http://localhost:8001/upload.php', this.myForm.value)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }
}

Step 5 – Create Upload.php File

In this step, Create upload.php file and update following code into it:

<?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/";
    $postdata = file_get_contents("php://input");
    $request = json_decode($postdata);
       
    $image_parts = explode(";base64,", $request->fileSource);
       
    $image_type_aux = explode("image/", $image_parts[0]);
       
    $image_type = $image_type_aux[1];
       
    $image_base64 = base64_decode($image_parts[1]);
       
    $file = $folderPath . uniqid() . '.png';
       
    file_put_contents($file, $image_base64);
   
?>

Note that, the upload.php file code will help you to upload image on server from angular 11 app.

Step 6 – Start Angular App And PHP Server

In this step, execute the following commands on terminal to start angular app and as well as php server:

ng serve

php -S localhost:8001

As final result, we could have something like this:

Reference:

https://www.tutsmake.com/