How to Image Upload Angular 12 Example

Hello Dev,

At the moment, i we’ll present you how one can picture add angular 12 instance. This text provides you with easy instance of how one can picture add angular 12 instance. you’ll discover ways to picture add angular 12 instance. So let’s observe few step to create instance of how one can picture add angular 12 instance.

Step 1:- Create New Angular App

First of, open your terminal and set up new angular app:

ng new my-new-app

Step 2:- Add Code on App.Module.ts File

Open src/app listing and open app.module.ts file. And add code into app.module.ts file.

First of, open your terminal and  set up new angular app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/frequent/http';
import { FormsModule, ReactiveFormsModule } from '@angular/varieties';
   
import { AppComponent } from './app.element';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  suppliers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3:- Add Code on View File

Open src/app listing and open app.element.html file. And add code into app.element.html file.

<h1>Find out how to Picture Add Angular 12 Instance</h1>
   
<type [formGroup]="myForm" (ngSubmit)="submit()">
     
    <div class="form-group">
        <label for="title">Title</label>
        <enter 
            formControlName="title"
            id="title" 
            kind="textual content" 
            class="form-control">
        <div *ngIf="f.title.touched && f.title.invalid" class="alert alert-danger">
            <div *ngIf="f.title.errors && f.title.errors.required">Title is required.</div>
            <div *ngIf="f.title.errors && f.title.errors.minlength">Title needs to be Three character.</div>
        </div>
    </div>
    
    <div class="form-group">
        <label for="file">File</label>
        <enter 
            formControlName="file"
            id="file" 
            kind="file" 
            class="form-control"
            (change)="onFileChange($occasion)">
        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors && f.file.errors.required">File is required.</div>
        </div>
    </div>
    
    <img [src]="imageSrc" *ngIf="imageSrc" model="top: 300px; width:500px">
        
    <button class="btn btn-primary" kind="submit">Submit</button>
</type>

Step 4:- Add Code On app.Element ts File

Open src/app listing and open app.Element.ts file. And add code into app.element.ts file.

import { Element } from '@angular/core';
import { HttpClient } from '@angular/frequent/http';
import { FormGroup, FormControl, Validators} from '@angular/varieties';
    
@Element({
  selector: 'app-root',
  templateUrl: './app.element.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   imageSrc: string = '';
   myForm = new FormGroup({
    title: new FormControl('', [Validators.required, Validators.minLength(3)]),
    file: new FormControl('', [Validators.required]),
    fileSource: new FormControl('', [Validators.required])
  });
  
  constructor(personal http: HttpClient) { }
    
  get f(){
    return this.myForm.controls;
  }
   
  onFileChange(occasion:any) {
    const reader = new FileReader();
    
    if(occasion.goal.recordsdata && occasion.goal.recordsdata.size) {
      const [file] = occasion.goal.recordsdata;
      reader.readAsDataURL(file);
    
      reader.onload = () => {
   
        this.imageSrc = reader.end result as string;
     
        this.myForm.patchValue({
          fileSource: reader.end result
        });
   
      };
   
    }
  }
   
  submit(){
    console.log(this.myForm.worth);
    this.http.publish('http://localhost:8001/add.php', this.myForm.worth)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Efficiently.');
      })
  }
}

Step 5:- Create add.php file

Now we’re able to run instance, i we’ll add api file utilizing php. so you may add add.php file with “add” folder and run with completely different port and name it. so let’s add add.php file as like bellow:
add.php

<?php
  
    header("Entry-Management-Permit-Origin: *");
    header("Entry-Management-Permit-Strategies: PUT, GET, POST");
    header("Entry-Management-Permit-Headers: Origin, X-Requested-With, Content material-Sort, Settle for");
      
    $folderPath = "add/";
    $postdata = file_get_contents("php://enter");
    $request = json_decode($postdata);
      
    $image_parts = explode(";base64,", $request->fileSource);
      
    $image_type_aux = explode("picture/", $image_parts[0]);
      
    $image_type = $image_type_aux[1];
      
    $image_base64 = base64_decode($image_parts[1]);
      
    $file = $folderPath . uniqid() . '.png';
      
    file_put_contents($file, $image_base64);
  
?>

Step 6:- Run Angular App:

ng serve

Step 7:- Run PHP API

php -S localhost:8001