Hello Devs,

In this tutorial, we are going to learn multiple image upload in angular 10.

Given below is simple example from scratch for upload multiple images with reactive form in angular 10 application.

Follow this step by step guide given below:




Create New App

ng new my-new-app



Import Module

src/app/app.module.ts

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 { }



Updated View File

src/app/app.component.html

<h1>Angular 10 Multiple Image Upload with Preview - Rathorji.in</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"

            multiple="" 

            (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 *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>



Use Component ts File

src/app/app.component.ts

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

   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) {

    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.');

      })

  }

}

upload.php

<?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);

}



Run this command:

ng serve

php -S localhost:8001


I hope this example helps you.