Php : get formData base64 image string and upload to local folder - php

Question

I have base64 image string sending in my API calling to a .php file
Request URL :
http://localhost/server/index.php?saveImageToFolder=true?id=1&name=fdsfsdf
My HTML form looke like below
Below is my code for sending base64 from Input type file which is in reactjs
function getBase64(file) {
return new Promise(function (resolve, reject) {
const reader = new FileReader();
reader.onload = function () {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
const onChangeImage = (e, id, slotname) => {
const formData = new FormData();
formData.append('file', e.target.files[0]);
const fileFound = e.target.type === 'file' && e.target.files[0];
const promise = fileFound && getBase64(fileFound);
promise.then(function(result) {
uploadImage({ 'id': id, 'slotname': slotname, 'slotimage': result });
})
}
And then i have formData in my payload. Below is the complete network tab payload
My index.php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
include("connect.php");
error_reporting(0);
session_start();
if(isset($_GET['saveImageToFolder'])){
var_dump($_POST['file']); //This is showing NULL
var_dump($_FILES['file']); //This is also showing NULL
$data = $_POST['file'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image.png', $data);
}
Image file is creating with PNG and 0KB. Not getting how to fetch values of formData and then further in index.php

Answer 1

const fileFound = e.target.type === 'file' && e.target.files[0];
evaluates to true or false and in the next step you pass a boolean to getBase64() instead of the filename.
const promise = fileFound && getBase64(fileFound);
So change it to
const promise = fileFound && getBase64(file);
instead.