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 file.io 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';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  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 - laratutorials.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 – 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';
    
@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

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

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

ng serve

php -S localhost:8001

Leave a Comment