Angular 15/14 multiple image upload with preview; Through this tutorial, i am going to show you how to upload multiple images with preview in Angular 15/14 apps.
Angular 15/14 Multiple Image Upload with Preview Tutorial with Example
Use the below given steps to upload multiple images with preview in Angular 15/14 apps with reactive form:
- Step 1 – Create New Angular App
- Step 2 – Import Module
- Step 3 – Create Image Upload Form on View File
- Step 4 – Update Component ts File
- Step 5 – Create Upload.php File
- Step 6 – Start Angular App And PHP Server
Step 1 – Create New Angular App
Run the following command on it terminal 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 { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 3 – Create Multiple Image Upload Form on View File
Go to src/app/app.component.html and update the following code into it:
<h1>Angular 13 Multiple Image Upload with Preview - 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 && 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" [disabled]="myForm.invalid" type="submit">Submit</button> </form>
Step 4 – Update Component ts File
Go to 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[] = []; /*------------------------------------------ -------------------------------------------- Declare Form -------------------------------------------- --------------------------------------------*/ myForm = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(3)]), file: new FormControl('', [Validators.required]), fileSource: new FormControl('', [Validators.required]) }); /*------------------------------------------ -------------------------------------------- Created constructor -------------------------------------------- --------------------------------------------*/ constructor(private http: HttpClient) { } /** * Write code on Method * * @return response() */ get f(){ return this.myForm.controls; } /** * Write code on Method * * @return response() */ 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]); } } } /** * Write code on Method * * @return response() */ 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
Create upload.php file and update the 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); }
Step 6 – Start Angular App And PHP Server
Run the following commands on terminal to start the angular app and as well as php server:
ng serve php -S localhost:8001
Be First to Comment