React app not sending files to php server with Ajax

Question

I'm hosting a react app on my apache server. I'm using react-images-upload npm package to receive an image from the user then post it to my php server with Axios.

However when I check the php $_FILES array in the response it's empty.

I have tested wether my server can receive files with a little upload form on the php side, and it worked great, checked memory limits, that the folder on the server is writable and such. When I console.log(thumbnail) I get a file object in the console, so the uploader works

everything seems fine. So I suspect it's something to do with the Ajax call.

Front end Code:

import React, { Component } from 'react'
import protocol from 'protocol.js';

import axios from 'axios';
import { Route, Switch, Redirect, useLocation } from "react-router-dom";

import styles from "components/Payment/Payment.module.css";
import "components/Payment/Payment.css";
import ImageUploader from 'react-images-upload';

var localStorage = require('local-storage');

class Payment extends Component {

  constructor(props) {
    super()

    this.state = {
      thumbnail: []
    }
    this.handlePayment = this.handlePayment.bind(this);
    this.onDrop = this.onDrop.bind(this);
  }

  onDrop(thumbnail) {
    this.setState({
        thumbnail: this.state.thumbnail.concat(thumbnail),
    });
  }  

  handlePayment() {
    var formData = new FormData();
    formData.append("thumbnail", this.state.thumbnail);
    
    axios.post('https://11.111.111.111/backend/ajax_controller.php', formData, {
      headers:{
       'Content-Type': 'multipart/form-data',
      },
    })
    .then(resp => {
      console.log(resp)
    })        
  }

  render() {

    return (
      <div className={styles.container}>

        <ImageUploader
            withPreview={true}
            singleImage={true}
            withIcon={true}
            buttonText='Profilna slika'
            onChange={this.onDrop}
            imgExtension={['.jpg', '.png']}
            maxFileSize={5242880}
            fileSizeError={"too big"}
        />

        <button className={styles.paymentButton} onClick={this.handlePayment}>Plati</button> 

      </div>
    )
  }
}

export default Payment;

Backend code:

print_r($_FILES);
if (move_uploaded_file($_FILES['thumbnail']['tmp_name'], __DIR__."/assets/".$_FILES['thumbnail']['name'])) {            
 echo "done";
 } else {
  echo "error";
 }

Any help would be much appreciated.

can you attach a screen shot of the outbound request from the network tab in your browser console? — Richard Tyler Miles
– Richard Tyler Miles, Commented Jun 29, 2021 at 19:17
At the bottom of the request call the payload should be attached confirming that the file was sent. You're screen shot cuts off just before that information :/ — Richard Tyler Miles
– Richard Tyler Miles, Commented Jun 29, 2021 at 20:01
Also I notice that the request method is OPTIONS. I'm not sure if this will work, you might try explicitly changing it to POST. — Richard Tyler Miles
– Richard Tyler Miles, Commented Jun 29, 2021 at 20:02
@TylerMiles I uploaded the wrong request :( I have updated the screenshot, apologies. — vuffer
– vuffer, Commented Jun 29, 2021 at 20:11

Neal Burns · Accepted Answer · 2021-06-29 21:03:44Z

2

I think this:

formData.append("thumbnail", this.state.thumbnail);

should be this:

formData.append("thumbnail", this.state.thumbnail[0]);

answered Jun 29, 2021 at 21:03

Neal Burns

8596 silver badges5 bronze badges

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

1 Comment

vuffer Over a year ago

Thank you very much :)

Collectives™ on Stack Overflow

React app not sending files to php server with Ajax

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related