How to Upload Multiple Images in Angular?
In this post we will give you information about How to Upload Multiple Images in Angular?. Hear we will give you detail about How to Upload Multiple Images in Angular?And how to use it also give you demo for it if it is necessary.
I want to share with you step by step example of angular multiple image upload with preview. we will learn multiple image upload in angular with web api using php. you need to follow few step to upload multiple images with preview in angular.
You can also upload multiple images in angular 6, angular 7, angular and angular 9 application.
i will give you very simple example from scratch for upload multiple images with reactive form in angular application.
Here, we will simple create reactive form using formGroup. input file onchange event we will add images to another formgroup element. then after click on submit button we will call web api for store that image to server.
I written step by step image uploading with angular application, also created web services using php. so let’s follow bellowing step and get preview like as bellow:
Step 1: Create New Project
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 and image tag for preview.
In this file i used bootstrap 4 class, if you want to use bootstrap then you can follow this link: Install Bootstrap 4 in Angular
so let’s put bellow code:
src/app/app.component.html
<h1>Angular Multiple Image Upload with Preview - ItSolutionStuff.com</h1>
<form [formGroup]="myForm" (ngSubmit)="submit()">
<div >
<label for="name">Name</label>
<input
formControlName="name"
id="name"
type="text"
>
<div *ngIf="f.name.touched && f.name.invalid" >
<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 >
<label for="file">File</label>
<input
formControlName="file"
id="file"
type="file"
multiple=""
(change)="onFileChange($event)">
<div *ngIf="f.file.touched && f.file.invalid" >
<div *ngIf="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 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 {
images = [];
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) {
if (event.target.files && event.target.files[0]) {
var filesAmount = event.target.files.length;
for (let i = 0; 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.');
})
}
}
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/";
$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);
}
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…
Hope this code and post will helped you for implement How to Upload Multiple Images in Angular?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs