Hello Devs,

In this tutorial, we are going to learn about angular 10 multiple file upload example.

Here we will see how to upload multiple file with form data in angular 10. We will see example of angular 10 reactive form multiple file upload. 

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 File Upload Example - 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" 

            multiple

            class="form-control"

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

          

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

   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 < event.target.files.length; i++) { 

            this.myFiles.push(event.target.files[i]);

        }

  }

      

  submit(){

    const formData = new FormData();

 

    for (var i = 0; i < this.myFiles.length; i++) { 

      formData.append("file[]", this.myFiles[i]);

    }

  

    this.http.post('http://localhost:8001/upload.php', formData)

      .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/";

      

    $file_names = $_FILES["file"]["name"];

    for ($i = 0; $i < count($file_names); $i++) {

        $file_name=$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);

    }

  

?>


Run this command:

ng serve

php -S localhost:8001


I hope this example helps you.