im trying to upload file using reactjs axios and php and while i am good with the fronend phase ,when i passed the file to php it shows empty stdclass

Viewed 26

thanks a lot, i'm having hard time in understanding what might be the problem, i tried to make the file part of formData and it didnt work and i;m absolutelly clueless. i get the file at an upload componnent:

import {React,useState,useEffect} from "react";
import { Link, NavLink, Outlet } from "react-router-dom";
import instance from "../api/AxiosInstance";
import "../styles/Package1.css";
const UploadFile = (props) => {
  const [selectedFile, setSelectedFile] = useState(null)
  const [isFilePicked, setIsFilePicked] = useState(false);
 const changeHandler = (event) => {
   setSelectedFile(event.target.files[0]);
   setIsFilePicked(true);
 };

 const handleSubmission =async () => {
   console.log(selectedFile);
   const result = await instance.request({
     data: {
       data_type: "uploadFile",
       params: selectedFile,
     },
   });
    console.log(result.data);
 };
  return (
    <div>
      <input type="file" name="file" onChange={changeHandler} />
      {isFilePicked ? (
        <div>
          <p>Filename: {selectedFile.name}</p>
          <p>Filetype: {selectedFile.type}</p>
          <p>Size in bytes: {selectedFile.size}</p>
          <p>
            lastModifiedDate:{" "}
            {selectedFile.lastModifiedDate.toLocaleDateString()}
          </p>
        </div>
      ) : (
        <p>Select a file to show details</p>
      )}
      <button onClick={handleSubmission}>Submit</button>
    </div>
  );
};

export default UploadFile;

and the axios instance look like this:

import axios from 'axios'
    const BASE_URL = "http://localhost:80/home/home-app/api.php";

    const instance = axios.create({
      baseURL: BASE_URL,
      method: "POST", // whem we define our method, when using "Request" then automatic it will be turn to post.
      timeout: 5000,
    });
export default instance;

// adding private instance to send cookies with our axios requests
export const axiosPrivate = axios.create({
  baseURL: BASE_URL,
  method: "POST",
  origin: 'http://localhost:3000',
  headers: { "Content-Type": "application/json" },
  withCredentials: true,
});

the php look like this, all i'm trying to do is to print the file obj back in the console

if(isset($DATA_OBJ->data_type)&&$DATA_OBJ->data_type=='uploadFile'){
    var_dump($DATA_OBJ->params);
    die;
    uploadFile();
}

the massage i'm getting at the console after the php is this:

object(stdClass)#2 (0) {
}

and when i print to console the file the state that contains it, i get the full ile obj :

File {name: 'FinelProject-ERD.drawio (4).png', lastModified: 1644874012902, lastModifiedDate: Mon Feb 14 2022 23:26:52 GMT+0200 (Israel Standard Time), webkitRelativePath: '', size: 441030, …}
lastModified: 1644874012902
lastModifiedDate: Mon Feb 14 2022 23:26:52 GMT+0200 (Israel Standard Time) {}
name: "FinelProject-ERD.drawio (4).png"
size: 441030
type: "image/png"
webkitRelativePath: ""

thank you very much

0 Answers
Related