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

Contents

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.

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

Angular 9 Image Upload with Preview - Pakainfo.com
   

     
    
        Name
        
        
            Name is required.
            Name should be 3 character.
        
    
    
    
        Your File
        
        
            File is required.

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

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 :

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.

Image Uploads with Angular 9 Tutorial