how to upload multiple images with preview in angular 11/12 app. In this tutorial, you will learn how to upload multiple images and display previews of this images in Angular 11/12 app. And also learn how to store multiple images or files in database.
As well as, this tutorial will guide you step by step on how to upload multiple images with preview in angular 11/12. And also use reactive form to upload multiple images in angular 11/12 app.
This tutorial will give you very simple and easy example of how to upload multiple images and display preview before uploading images in angular 11/12 apps.
Multiple Image Upload with Preview in Angular 12
Just follow the following steps to upload multiple images with preview in angular 11/12 app using 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 12 Multiple Image Upload with Preview - 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 && 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"
class="form-control"
multiple=""
(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>
<img *ngFor='let url of images' [src]="url" height="150" width="200px" style="margin: 3px;"> <br/>
<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 {
images : string[] = [];
myForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
file: new FormControl('', [Validators.required]),
fileSource: new FormControl('', [Validators.required])
});
constructor(private http: HttpClient) { }
get f(){
return this.myForm.controls;
}
onFileChange(event:any) {
if (event.target.files && event.target.files[0]) {
var filesAmount = event.target.files.length;
for (let i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = (event:any) => {
console.log(event.target.result);
this.images.push(event.target.result);
this.myForm.patchValue({
fileSource: this.images
});
}
reader.readAsDataURL(event.target.files[i]);
}
}
}
submit(){
console.log(this.myForm.value);
this.http.post('http://localhost:8001/upload.php', this.myForm.value)
.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/";
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
foreach ($request->fileSource as $key => $value) {
$image_parts = explode(";base64,", $value);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.'.$image_type;
file_put_contents($file, $image_base64);
}
Note that, the upload.php file code will help you to upload multiple images on server from angular 12 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
Recommended Angular Posts
