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.

Also Read This πŸ‘‰   ASP.NET Page life cycle with Events

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 :

Also Read This πŸ‘‰   Palindrome Number Program in JavaScript

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.