Date:

Share:

Upload Image In Angular With PHP. How To Upload File In Angular.

Related Articles

In this post, we will learn how to upload a file and save as Base64 in a folder using the PHP API. To convert an image to Base64 we will use Angular and for API we will use PHP.

There are many ways to upload an image in Angular but in this post we will upload and convert a file in Base64 and then save it in a folder using PHP.

Here are the steps to upload an image in Angular and web services in PHP. So let’s take the following steps to do so.

Step 1 Create an angular project.

Create an angular app using the command below.

ng new imageupload
Step 2 Import module.

At this point we need to import HttpClientModule into app.module.ts. Then open the app.module.ts file and import it.

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  HttpClientModule  from '@angular/common/http';
   
import  AppComponent  from './app.component';
   
@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

Step 3 Update the component file.

Add code below in the app.component.ts file.

import  Component, OnInit  from '@angular/core';
import  HttpClient  from '@angular/common/http'; 

@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 

  imageSrc:any = '';
  status:boolean = false

  constructor(private http: HttpClient)  

  ngOnInit(): void  

  onFileChange(event:any) 
    this.status = false
    const file = event.target.files[0];
    this.status = event.target.files.length>0?true:false
    if(this.status==true)
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = () => 
          this.imageSrc = reader.result;          
       
    

  

  submit()

    this.http.post('http://localhost/phpapi/imageupload.php', 'image':this.imageSrc)
      .subscribe(res => 
        console.log(res);
        alert('Uploaded Successfully.');
      )
  


Step 4 Update the HTML file.

Add code below in the app.component.html file.

<h6 class="text-primary" align="center">Image Upload With Angular And PHP</h6>
    <label for="file">Select Image</label>
      <input  (change)="onFileChange($event)"  id="file" type="file">         
  <button [disabled]="!status"class="btn btn-primary" type="submit" (click)="submit()">Upload</button>

Step 5: Create an API in PHP.

Add the imageupload.php code below

<?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");	 
    if(!empty($postdata))
    $request = json_decode($postdata);
    $image_parts = explode(";base64,", $request->image);      
    $image_type_aux = explode("image/", $image_parts[0]); 
    $image_base64 = base64_decode($image_parts[1]);      
    $file = $folderPath . uniqid() . '.png';      
    if(file_put_contents($file, $image_base64))	
	$response[] = array('sts'=>true,'msg'=>'Successfully uploaded');
          
     echo json_encode($response);
   
?>

Now our API and interface are ready, so launch both apps and test them.

Reactive shape validation at an angle. Multi-step form at an angle.

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles