Multiple File Upload in Angular Tutorial

In this tutorial, i would like to show you simple example of angular multiple file upload example. i explain you step by step example of angular reactive form multiple file upload. we will simply upload multiple file with angular application.

You can easily multiple file upload in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application

Here, i want to give you simple example of multiple file upload in angular application. we will upload multiple files in angular application. i will give you very simple example of angular multiple file upload. you can say it's angular reactive form multiple file upload.

I explain step by step multiple file upload with angular application. I already written more tutorial about file upload as like bellow:

File Uploading with Angular

Image Uploading with Angular

Multiple Image Uploading with Angular

In this example, i want to share with you how to multiple file upload with form data in angular. we will see example of angular reactive form multiple file upload. we will use reactive form with multiple file upload in angular step by step. i also created api for store file in folder using php for angular multiple file upload.

Here, we will simple create reactive form using formGroup. input file onchange event we will add file to another formgroup element. then after click on submit button we will call web api for store that file to server.

I written step by step multiple file uploading with angular application, also created web services using php. so let's follow bellowing step and get preview like as bellow:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new my-new-app

Step 2: Import Module

In this step, we need to import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file. so let's import it as like bellow:

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

Step 3: Updated View File

Now here, we will updated our html file. we will create simple reactive form with input file element.

In this file i used bootstrap 4 class, if you want to use bootstrap then you can follow this link: Install Bootstrap 4 in Angular

so let's put bellow code:

src/app/app.component.html

<h1>Angular Multiple File Upload Example - ItSolutionStuff.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.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>

Step 4: Use Component ts File

Now we need to update our component.ts file with formGroup and formControl element.

i used my local api file url 'http://localhost:8001/upload.php', you can use your api there.

so, let's update as like bellow:

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

Now we are ready to run our example, we will create api file using php. so you can create update.php file with "upload" folder and run with different port and call it. so let's create upload.php file as like bellow:

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

Now we are ready to run both:

Run Angular App:

ng serve

Run PHP API:

php -S localhost:8001

Now you can run and check it.

I hope it can help you...