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

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 !

not an expert in PHP but, shouldn't be `dataForm.append('Files[]', uploadedFiles)` ? — ludwiguer, Jun 27 '20 at 00:04
You are right @ludwiguer since i'm dealing with an array of files, I posted the solution, turns out axios.post() sends all data as JSON by defualt. Thanks for your help ! — Marcel.af, Jun 27 '20 at 13:34

score 3 · Accepted Answer · answered Jun 27 '20 at 13:34

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);
    });

Thank you so much! In my case, I just needed to change the headers as you suggested, and it worked. — Xaypanya Phongsa, Jul 06 '23 at 19:12

score 2 · Answer 2 · answered Jun 27 '20 at 00:09

2

This is how you upload multiple files in React

const dataForm = new FormData();
uploadedFiles.map(file => 
    dataForm.append("Files[]", file);
}

answered Jun 27 '20 at 00:09

ludwiguer

2,177
2
15
21

score 0 · Answer 3 · answered Sep 17 '21 at 20:42

0

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.

answered Sep 17 '21 at 20:42

oneman93

246
2
5

score 0 · Answer 4 · answered Jan 16 '22 at 04:49

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(() => {
            //...
};

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

4 Answers4