how to send file to php use HttpClient and FormData in ionic and how to Recepion file in php

Issue

I have input file in mypage.html on ionic and i want send this file to php because upload file on server this mypage.page.html, I create input text for the name file and input file to uploaded

<ion-header>
  <ion-toolbar>
    <ion-title>Send Data</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<ion-card class="ion-align-items-center">
  <ion-card-header>
    <ion-card-subtitle>Send Data</ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    <input type="text" [(ngModel)]="name1">
    <input type="file" [(ngModel)]="fle1" (change)="selectedFile($event)">
    <button (click)="OnClick()">Send</button>
  </ion-card-content>
</ion-card>
</ion-content>

this Code mypage.page.ts, i use HttpClient to send data and use FormData And converted to json Then sended to 'http://localhost:8080/ionic/api.php'

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  name1:any
  fle1:any
  constructor(private http: HttpClient) { }

  selectedFile(event:any){
    this.fle1=event.target.files[0];
  }
  OnClick(){
    const formdata=new FormData();
    formdata.append("frm",this.fle1);
    formdata.append("frm",this.name1);
    
    
    this.http.post('http://localhost:8080/ionic/api.php',JSON.stringify(formdata)).subscribe((response:any)=>{
      console.log(response);
    });
  }
}

this code app.module.ts i include HttpClientModule in page

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule,ReactiveFormsModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

and this code php ,I want received data I Don't Now how to get temp file for uploaded

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json;charset=UTF-8");
header("Access-Control-Allow-Method: POST");
header("Access-Control-Max-Age: 86400");
header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods, Authorization, X-Requested-With");

$json=null;
$json    = json_decode(file_get_contents('php://input'));
if($json){
    $data = ['form'=>$json];
        echo json_encode($data);
}

I want help for this problem

Solution

one way would be to handle it as a blob

  selectedFile(event): void {
        if (event.target.files && event.target.files.length) {
          let file = event.target.files[0];
          this.yourFormData = new FormData();
          let blob = new Blob([file], {
            type: 'application/octet-stream',
          });
          this.yourFormData.append('file', blob);
        }

  }

Answered By - Niran Manandhar