How to upload multiple file in Angular 11/12 App. In this tutorial, you will learn how to upload multiple file in angular 11/12 app.
As well as, this tutorial will guide you step by step on how to upload multiple file in angular 11/12. And also use reactive form to upload multiple files in angular 11/12 app.
This tutorial will give you very simple and easy example of how to upload multiple file in angular 11/12 app and as well as how to store multiple files into directory.
Multiple File Upload in Angular 11/12 App
Just follow the following steps to upload multiple files in angular 11/12 app with reactive form:
- Step 1 – Create New Angular App
- Step 2 – Import Module
- Step 3 – Add Code on View File
- 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
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Import Module
Then, 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';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 3 – Add Code on View File
In this step, 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 11 Multiple File Upload Example - Tutsmake.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
In this step, visit the 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';
@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.');
})
}
}
Step 5 – Create Upload.php File
In this step, Create upload.php file and update following code into it:
<?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);
}
?>
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
In this step, execute the following commands on terminal to start angular app and as well as php server:
ng serve php -S localhost:8001
