Upload Multiple Images with Preview Example Angular 12

In this tutorial, we will explain how to upload multiple images and display previews of an image in Angular 11/12 app. We will also learn comprehensively to store multiple images or files in the database.

In addition to the previously mentioned, this tutorial will guide step by step on using reactive form to upload multiple images in Angular 11/12 app.

Learn How to Upload Multiple Images in Angular 12

The above mentioned will be done in quite some simple and easy steps before uploading the images in Angular 11/12 apps.

Now, see the following steps to upload multiple images with preview in Angular 11/12 app using reactive form

• Step 1 is Creating a New Angular App
• Step 2 is Importing the Module
• Step 3 is Adding Code on View File
• Step 4 is Using the Component ts File
• Step 5 is Creating the Upload.php File
• Step 6 is Starting Angular App And PHP Server

Step 1 – Creating a New Angular App

The first step is just to open your terminal and execute the following command on it to install the Angular app:

ng new my-new-app

Step 2 – Importing the Module

Afterwards, open the app.module.ts file and import the 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 { }

In third step, you need to create the simple reactive form with input file element and the 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 - thecodemon.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 – Using the Component ts File

Next, you have to 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 {
   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 – Creating the 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);
    
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);
}

But it should be noted that the upload.php file code will help you to upload multiple images on server from Angular 12 app.

Step 6 – Starting the Angular App And PHP Server

Finally, you come to the end where you execute the following commands on terminal to start angular app and as well as php server:

ng serve

php -S localhost:8001