Image Upload With Preview in Angular 12/11

Angular 12/11 image upload with preview example; In this tutorial, you will learn how to upload image with preview in angular 12/11 app.

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

Reactive Form Image Upload with Preview in Angular 12/11

Use the following steps to upload image with preview in angular 11/12 app with reactive form:

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

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 - tutsmake.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.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 && 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, visit the 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';

@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

Recommended Angular Tutorials