Multiple File Upload in Angular 12 Example
In this tutorial we will go over the demonstration of angular 12 multiple file upload. step by step explain multiple file upload in angular 12. you will learn angular 12 multiple file upload example. let’s discuss about angular 12 multiple file upload with preview.
In this example, i want to share with you how to multiple file upload with form data in angular 12. we will see example of angular 12 reactive form multiple file upload. we will use reactive form with multiple file upload in angular 12 step by step. i also created api for store file in folder using php for angular 12 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 12 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 5 class, if you want to use bootstrap then you can follow this link: Install Bootstrap 5 in Angular 12
so let's put bellow code:
src/app/app.component.html
<h1>Angular 12 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 && f.name.errors.required">Name is required.</div>
<div *ngIf="f.name.errors && 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 && 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:any) {
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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- File Uploading in Angular 12 Tutorial
- Image Upload in Angular 12 Tutorial
- How to install Material Design in Angular 12?
- Angular 12 Reactive Forms Validation Example
- How to Add Bootstrap 5 in Angular 12?
- How to Create & Use Component in Angular 12?
- Angular 12 Create New Project Tutorial
- Angular Upgrade from 11 to 12 Version Example
- Angular Convert HTML to PDF File Example
- Angular Owl Carousel/Slider Example Tutorial
- Angular Line Chart Example Tutorial