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