Angular 16 multiple image upload with preview; Through this tutorial, i am going to show you how to upload multiple images with preview in Angular 16 apps.
Angular 16 Multiple Image Upload with Preview Tutorial with Example
Use the below given steps to upload multiple images with preview in Angular 16 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