Angular 10 Multiple File Upload Example

Hello dev, Today we are going to learn Angular 10 Multiple File Upload Example. This tutorial will cover on Multiple file upload in angular 10 with example.

Here, We will show you angular 10 multiple file upload. We explained simply step by step multiple file upload in angular 10. We explained simply about angular 10 multiple file upload example. This article goes in detail on angular 10 multiple file upload with preview. Follow bellow tutorial step of angular 10 multiple file upload formdata.

In this example, We want to share with you how to multiple file upload with form data in angular 10. we will see example of angular 10 reactive form multiple file upload. we will use reactive form with multiple file upload in angular 10 step by step. We also created api for store file in folder using php for angular 10 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 10 application, also created web services using php. so let’s follow bellowing step:

Also Read: Angular Generate Random Password Example

Steps on Angular 10 Multiple File Upload

  • Step 1: Create New App
  • Step 2: Import Module
  • Step 3: Updated View File
  • Step 4: Use Component ts File
  • Step 5: Testing

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

Also Read: Codeigniter 3 and AngularJS CRUD with Search and Pagination Tutorial.

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 we used bootstrap 4 class, so let’s put bellow code:

src/app/app.component.html

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

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

Also Read: How to Create & Use Component in Angular 13 App

Step 5: Testing

So all the steps has been done. Now we can start testing our application by running the following command:

Run Angular App:

ng serve

Run PHP API:

php -S localhost:8001

Conclusion

Today, We had learn Angular Generate Random Password Examples. Hope this tutorial helped you with learning Angular Language. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.

Also Read: Angular Generate Random Password Example

Leave a Reply