0

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

enter image description here

enter image description here

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.

vuffer
  • 166
  • 1
  • 5
  • 17
  • can you attach a screen shot of the outbound request from the network tab in your browser console? – Richard Tyler Miles Jun 29 '21 at 19:17
  • @TylerMiles I have added the screenshots – vuffer Jun 29 '21 at 19:28
  • 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 Jun 29 '21 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 Jun 29 '21 at 20:02
  • @TylerMiles I uploaded the wrong request :( I have updated the screenshot, apologies. – vuffer Jun 29 '21 at 20:11
  • so it looks like your request is generally fine from a react standpoint.. I see the uri's have changed from the example code and the screen shot, but I assume you are aware of that. This post about [php files](https://stackoverflow.com/questions/3586919/why-would-files-be-empty-when-uploading-files-to-php) will give you the next debugging steps. PHP has some tricky configuration options you need to double check. – Richard Tyler Miles Jun 29 '21 at 20:18
  • @TylerMiles I checked all the above points. My server uploads files fine when done through a normal form, but not through ajax. The post mentions not to use Ajax but that is not an option for me. – vuffer Jun 29 '21 at 20:52

1 Answers1

2

I think this:

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

should be this:

formData.append("thumbnail", this.state.thumbnail[0]);
Neal Burns
  • 839
  • 4
  • 5