$_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
– ludwiguer, Commented Jun 27, 2020 at 0: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
– Marcel.af, Commented Jun 27, 2020 at 13:34

Marcel.af · Accepted Answer · 2020-06-27 13:34:09Z

3

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

answered Jun 27, 2020 at 13:34

Marcel.af

739 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xaypanya Phongsa Over a year ago

Thank you so much! In my case, I just needed to change the headers as you suggested, and it worked.

ludwiguer · Accepted Answer · 2020-06-27 00:09:41Z

2

This is how you upload multiple files in React

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

answered Jun 27, 2020 at 0:09

ludwiguer

2,2552 gold badges17 silver badges21 bronze badges

Comments

oneman93 · Accepted Answer · 2021-09-17 20:42:12Z

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, 2021 at 20:42

oneman93

2462 silver badges5 bronze badges

Comments

kiatng · Accepted Answer · 2022-01-16 04:49:19Z

0

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

answered Jan 16, 2022 at 4:49

kiatng

3,08736 silver badges43 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related