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.