Angular 12 Multiple File Upload Tutorial with Example

Multiple File Upload with Angular 12 multipart/form-data and PHP; In this tutorial, i am going to show you from scratch on how to upload multiple file in angular 12 app with multipart/form-data and PHP.

Multiple image upload allows the user to select multiple files at once and upload all files to the server. index. html Create a simple HTML page to select multiple files and submit it to upload files on the server. Here, the HTML file contains a form to select and upload files using the POST method.

Angular 12 multiple file upload in angular example; i will make and use REST API for receiving the upload files and store them in a folder using php

Multiple File Upload with Angular 12 FormData and PHP

  • Step 1 – Create New Angular App
  • Step 2 – Import Module
  • Step 3 – Create Multiple File Upload Form
  • 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 terminal to install angular app:

ng new my-new-app

Step 2 – Import Module

Import modules; 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';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 3 – Create Multiple File Upload Form

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 File Upload Example -</h1>
<form [formGroup]="myForm" (ngSubmit)="submit()">
    <div class="form-group">
        <label for="name">Name</label>
        <div *ngIf=" &&" class="alert alert-danger">
            <div *ngIf="">Name is required.</div>
            <div *ngIf="">Name should be 3 character.</div>
    <div class="form-group">
        <label for="file">File</label>
        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors.required">File is required.</div>
    <button class="btn btn-primary" type="submit">Submit</button>

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';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
   myFiles:string [] = [];
   myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    file: new FormControl('', [Validators.required])
  constructor(private http: HttpClient) { }
  get f(){
    return this.myForm.controls;
  onFileChange(event) {
        for (var i = 0; i <; i++) { 
    const formData = new FormData();
    for (var i = 0; i < this.myFiles.length; i++) { 
      formData.append("file[]", this.myFiles[i]);
    }'http://localhost:8001/upload.php', formData)
      .subscribe(res => {
        alert('Uploaded Successfully.');

Step 5 – Create Upload.php File

In this step, Create upload.php file and update following code into it:

    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/";
    $file_names = $_FILES["file"]["name"];
    for ($i = 0; $i < count($file_names); $i++) {
        $extension = end(explode(".", $file_name));
        $original_file_name = pathinfo($file_name, PATHINFO_FILENAME);
        $file_url = $original_file_name . "-" . date("YmdHis") . "." . $extension;
        move_uploaded_file($_FILES["file"]["tmp_name"][$i], $folderPath . $file_url);

Note that, the upload.php file code will help you to upload multiple files 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

Recommended Angular Posts

Leave a Comment