Multiple Image Upload with Preview in Angular 12

Angular 12 multiple image upload with preview example; i am going to show you very easy way on how to upload multiple images with preview in angular 12 app. As well as how do you store multiple images or files into database.

For backend; i will use php rest api for store data into directories and database.

Angular 12 Multiple Image Upload with Preview Example

• 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

Execute the following command on terminalto install angular app:

ng new my-new-app

Step 2 – Import Module

Import moduls; so 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 file upload tag. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 12 Multiple 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 && f.name.errors.required">Name is required.</div>
            <div *ngIf="f.name.errors && 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"
            multiple="" 
            (change)="onFileChange($event)">
        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors && f.file.errors.required">File is required.</div>
        </div>
    </div>
   
    <img *ngFor='let url of images'  [src]="url" height="150" width="200px" style="margin: 3px;"> <br/>
       
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

Step 4 – Use Component ts File

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 {
   images : 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:any) {
    if (event.target.files && event.target.files[0]) {
        var filesAmount = event.target.files.length;
        for (let i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
   
                reader.onload = (event:any) => {
                  console.log(event.target.result);
                   this.images.push(event.target.result); 
   
                   this.myForm.patchValue({
                      fileSource: this.images
                   });
                }
  
                reader.readAsDataURL(event.target.files[i]);
        }
    }
  }
    
  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);
   
foreach ($request->fileSource as $key => $value) {
   
    $image_parts = explode(";base64,", $value);
   
    $image_type_aux = explode("image/", $image_parts[0]);
   
    $image_type = $image_type_aux[1];
  
    $image_base64 = base64_decode($image_parts[1]);
  
    $file = $folderPath . uniqid() . '.'.$image_type;
  
    file_put_contents($file, $image_base64);
}

Note that, the upload.php file code will help you to upload multiple images on server from angular 12 app.

Step 6 – Start Angular App And PHP Server

Execute the following commands on terminal to start server:

ng serve

php -S localhost:8001

Recommended Angular Tutorials