Multiple File Upload with Angular 12 multipart/form-data and PHP; In this tutorial, i am going to show you from scratch on how to upload multiple file in angular 12 app with multipart/form-data and PHP.
Multiple image upload allows the user to select multiple files at once and upload all files to the server. index. html Create a simple HTML page to select multiple files and submit it to upload files on the server. Here, the HTML file contains a form to select and upload files using the POST method.
Angular 12 multiple file upload in angular example; i will make and use REST API for receiving the upload files and store them in a folder using php
Multiple File Upload with Angular 12 FormData and PHP
- Step 1 – Create New Angular App
- Step 2 – Import Module
- Step 3 – Create Multiple File Upload Form
- 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
Execute the following command on terminal to install angular app:
ng new my-new-app
Step 2 – Import Module
Import modules; So 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 – Create Multiple File Upload Form
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 12 Multiple File Upload Example - Laratutorials.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
Go to 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
Execute the following commands on terminal to start angular app and as well as php server:
ng serve php -S localhost:8001