$_FILES is empty when sending a POST request using axios in ReactJs - php

Question

I have an array of Files that i want to retrieve in php along with some other string params, When i send the file(s) from the FormData in React they're being received as json in php :
"{"dataForm":{"Files":[{"path":"aust.jpeg"}]},"headers":{"content-type":"multipart/form-data"}}"
I want to receive them in $_FILES instead for obvious reasons, is it possible to do that and read the rest of the params as json in php ? Also my php.ini is fully configured to allow file uploads
Here is the Reactjs code :
import axios from 'axios';
const sendMail = (data, uploadedFiles) => {
const dataForm = new FormData();
dataForm['Files'] = uploadedFiles; // Here uploadedFiles is an array of files
console.log(dataForm['Files'])
axios.post('http://localhost/bickdata/mail/SendMail.php', {
dataForm,
headers: {
'content-type': 'multipart/form-data'
}
}) .then(function (response) {
console.log(response);
});
}
Thanks in advance !

Answer 1

This is how you upload multiple files in React
const dataForm = new FormData();
uploadedFiles.map(file =>
dataForm.append("Files[]", file);
}

Answer 2

Turns out axios.post() sends all the data as JSON by default which is why the files are not being interpreted as File objects in php, I did some minor changes with the post request and i finally received my files, here's the updated code :
(i'm only sending one file from the array for now, but i'm pretty sure it's the same procedure for an array of files)
dataForm.append(
"potato",
uploadedFiles[0],
uploadedFiles[0].name
);
axios({
method: 'post',
url: 'http://localhost/bickdata/mail/SendMail.php',
data: dataForm,
headers: {'Content-Type': 'multipart/form-data' }
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});

Answer 3

In my case, it was 2MB upload_max_filesize in php.ini. Please see
PHP - empty $_POST and $_FILES - when uploading larger files
I pulled out my hair for 2 hours. Nothing wrong with Axios. I didn't need to specify headers.

Answer 4

Ref MDN Web Docs, the FormData's encoding type were set to multipart/form-data. Taking the sample code cue, I managed to upload a file with this:
const api = axios.create({ baseURL: '<?php $this->getUrl() ?>' })
editPost = function(e) {
// target is the input element
const target = typeof e === 'string' ? document.querySelector(e) : e.target;
let form = new FormData();
form.append(target.name, target.type == 'file' ? target.files[0] : target.value);
form.append('sid', '<?php echo $this->getSessionId() ?>');
api.post('/editPost', form)
.then((response) => {
//...
})
.catch(() => {
//...
};