Angular 14 Multiple Image Upload with Preview Example

Angular 14 multiple image upload with preview; In this tutorial, you will learn how to upload multiple images with preview in angular 14 apps. And as well as learn how to use rest API services in angular 14 apps to upload multiple images into the server directory.

Angular 14 Multiple Image Upload with Preview Example

Use the following steps to upload multiple images with preview in angular 14 apps with reactive form:

• Step 1 – Create New Angular App
• Step 2 – Import Module
• Step 3 – Create Image Upload Form on View File
• Step 4 – Update 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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 – Create Multiple Image Upload Form 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 14 Multiple 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 && 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" [disabled]="myForm.invalid" type="submit">Submit</button>
</form>

Step 4 – Update Component ts File

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[] = [];

  /*------------------------------------------
  --------------------------------------------
  Declare Form
  --------------------------------------------
  --------------------------------------------*/
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    file: new FormControl('', [Validators.required]),
    fileSource: new FormControl('', [Validators.required])
  });

  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(private http: HttpClient) { }

  /**
   * Write code on Method
   *
   * @return response()
   */
  get f(){
    return this.myForm.controls;
  }

  /**
   * Write code on Method
   *
   * @return response()
   */
  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]);
        }
    }
  }

  /**
   * Write code on Method
   *
   * @return response()
   */
  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 the 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 images on the server from the angular 14 apps.

Step 6 – Start Angular App And PHP Server

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

ng serve

php -S localhost:8001

Recommended Angular Tutorials