Angular 12 Image Upload Preview Tutorial

Angular 12 image upload preview example. In this tutorial, i am going to show you on how to upload image with preview in angular 12 app on assets folder.

The file/image upload is an essential component to make a form that store some image kind of data. It helps in applications using image upload or in the file sharing. This file-upload component uses API for uploading file and in return it provides a shareable link.

For backend; in this tutorial, i will use PHP server to upload image into database and directory.

How to Upload Image with Preview in Angular 12

  • Step 1 – Create New Angular App
  • Step 2 – Import Module
  • Step 3 – Add Code on View File
  • Step 4 – Import Component app.component.ts
  • Step 5 – Create Upload.php File
  • Step 6 – Start Angular App And PHP Server

Step 1 – Create New Angular App

Execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Import Module

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';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 3 – Add Code on View File

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 12 Image Upload with Preview -</h1>
<form [formGroup]="myForm" (ngSubmit)="submit()">
    <div class="form-group">
        <label for="name">Name</label>
        <div *ngIf=" &&" class="alert alert-danger">
            <div *ngIf="">Name is required.</div>
            <div *ngIf="">Name should be 3 character.</div>
    <div class="form-group">
        <label for="file">File</label>
        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors.required">File is required.</div>
    <img [src]="imageSrc" *ngIf="imageSrc" style="height: 300px; width:500px">
    <button class="btn btn-primary" type="submit">Submit</button>

Step 4 – Import Component app.component.ts

Go to src/app directory and open app.component.ts. Then add the following code like 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';
  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( && {
      const [file] =;
      reader.onload = () => {
        this.imageSrc = reader.result as string;
          fileSource: reader.result
    console.log(this.myForm.value);'http://localhost:8001/upload.php', this.myForm.value)
      .subscribe(res => {
        alert('Uploaded Successfully.');

Step 5 – Create Upload.php File

Create upload.php file and update following code into it:

    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

Execute the following commands on terminal to start angular app and as well as php server:

ng serve

php -S localhost:8001

Be First to Comment

Leave a Reply

Your email address will not be published.