Monday, November 28, 2022

Angular Image Upload With Preview and save to folder with PHP

Angular Image Upload With Preview and save to folder with PHP - The Rich Post


Hello to all, welcome to In this post, I came with fresh topic and I will tell you, Angular Image Upload With Preview and save to folder with PHP.

I am doing this with Angular latest version Angular 6 and with php file upload code, I will save it to folder. This is very interesting post by my point of view.

I will added the image preview code in it and here is the working picture:

Here are complete code for Angular Image Upload With Preview and save to folder with PHP :


1. Here is the code for app.component.ts file:
import {Component} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  public imagePath;
  constructor(private http: HttpClient) {}
  url: string;
  onSelectFile(event) { // called each time file input changes
    if ( &&[0]) {
      var reader = new FileReader();
           this.imagePath =;
       for (const file of this.imagePath) {
       const formData = new FormData();
       formData.append('image', file,;
       const headers = new HttpHeaders();
           headers.append('Content-Type', 'multipart/form-data');
           headers.append('Accept', 'application/json');'http://localhost/mypage.php', formData).subscribe( headers, console.log( );
       reader.readAsDataURL([0]); // read file as data url
       reader.onload = (event) => { // called once readAsDataURL is completed
      this.url =;
2. Here is code need to app.component.html file:
<div class="jumbotron text-center">
  <h3>Angular6 Image Upload to php:</h3>
<div style="text-align:center">
<img [src]="url" height="200" *ngIf="url"> <br/>
<input type='file' (change)="onSelectFile($event)">


3. Here php file upload code and need to add your php file:
move_uploaded_file($_FILES["image"]["tmp_name"], "img/" . $_FILES["image"]["name"]);

 4. And finally make img folder to save image.

Here you done and any query related with this post, then please ask questions and do comment below.


the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.