Image Uploads with Angular 9 Tutorial

Today, We want to share with you Image Uploads with Angular 9 Tutorial.In this post we will show you angular 8 file upload example, hear for Angular 8|9 Node & Express JS File Upload Tutorial we will give you demo and example for implement.In this post, we will learn about Angular 9/8 Tutorial & Example — Upload Files with FormData with an example.

Image Uploads with Angular 9 Tutorial

There are the Following The simple About ng2-file-upload angular 8 Full Information With Example and source code.

As I will cover this Post with live Working example to develop file upload in angular 8 stackblitz, so the angular 6 file upload with progress bar stackblitz is used for this example is following below.

Read Also:  php artisan clear cache

Phase 1: Make New App

angular app using bellow command:

ng new my-new-app

Phase 2: Import Module

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 { }

Phase 3: Updated View File

src/app/app.component.html

<h1>Angular 9 Image Upload with Preview - Pakainfo.com</h1>
   
<form [formGroup]="webFrm" (ngSubmit)="submit()">
     
    <div class="jkrd form-control dsp">
        <label for="name">Name</label>
        <input 
            formControlName="name"
            id="name" 
            type="text" 
            class="bbrp form-control jdk">
        <div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">
            <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 class="jkrd form-control dsp">
        <label for="file">Your File</label>
        <input 
            formControlName="file"
            id="file" 
            type="file" 
            class="bbrp form-control jdk"
            (change)="onFileChange($event)">
        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors.required">File is required.</div>
        </div>
    </div>
    
    <img [src]="imageSrc" *ngIf="imageSrc" style="height: 300px; width:500px">
        
    <button class="btn btn-default" type="submit">Submit</button>
</form>

Phase 4: Use Component ts File

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 {
   imageSrc: string;
   webFrm = 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.webFrm.controls;
  }
   
  onFileChange(event) {
    const reader = new FileReader();
    
    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);
    
      reader.onload = () => {
   
        this.imageSrc = reader.result as string;
     
        this.webFrm.patchValue({
          fileSource: reader.result
        });
   
      };
   
    }
  }
   
  submit(){
    console.log(this.webFrm.value);
    this.http.post('http://domain_name/upload.php', this.webFrm.value)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }
}

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);
      
    $full_img_parts = explode(";base64,", $request->fileSource);
      
    $full_img_type_aux = explode("image/", $full_img_parts[0]);
      
    $full_img_type = $full_img_type_aux[1];
      
    $full_img_base64 = base64_decode($full_img_parts[1]);
      
    $file = $folderPath . uniqid() . '.png';
      
    file_put_contents($file, $full_img_base64);
  
?>

Web Programming Tutorials Example with Demo

Read :

Read Also:  what is solid principles? and solid principles c#

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about angular 6|7|8|9 image upload example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  vuejs Manipulate Numbers Money Format
  2. Read Also:  Install PHP Accelerator using Xampp
  3. Read Also:  WooCommerce Get Product Dimensions
  4. Read Also:  jQuery Alternate Dynamic Table Rows Color
  5. Read Also:  Laravel JSON Array Merge into one array
  6. Read Also:  Angular Grid Alternate row color Example
  7. Read Also:  How to Get Absolute Directory Path in PHP Script
  8. Read Also:  Laravel Toggle Switch Inside Bootstrap Ajax Example
  9. Read Also:  How to Get Absolute Directory Path in PHP Script
  10. Read Also:  jQuery Alternate Dynamic Table Rows Color
CLOSEX