How do I save a file with php from a react, axios, and dropzone front end?

Question

I'm trying to upload an image with a react, axios, and dropzone front end and I have a php back end. I keep getting the error when trying to upload the file. I'm not sure if its a front end issue or a back end php issue. I'm not an expert at php, but I'm trying to learn.

My react code

import React, {Fragment} from 'react';
import Dropzone from 'react-dropzone';
import axios from 'axios';

class ContentForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      username: '',
      email: '',
      isChecked: false 
    };
  }

  myChangeHandler = (event) => {
    this.setState({
      username: event.target.value
    });
  }

  myChangeHandlerEmail = (event) => {
    this.setState({
      email: event.target.value
    });
  }

  toggleChange = (event) => {
    this.setState({
      isChecked: !this.state.isChecked
    });
  }

  handleSubmit = event => {
    event.preventDefault();

    if(this.state.isChecked){


      bodyFormData.append('FullName', this.state.username); 
      bodyFormData.append('email', this.state.email);
      bodyFormData.append("image", this.state.image);


      axios({
        method: 'post',
        url: 'PHP-CODE-URL',
        data: bodyFormData,
        headers: {'Content-Type': 'multipart/form-data' }
        })
        .then(function (response) {
            //handle success
            console.log(response);
        })
        .catch(function (response) {
            //handle error
            console.log(response);
      });
      }
  }


  render() {
    return (
        <Fragment>
          <div className="contentForm__contaner">
            <form className="contentForm__form" onSubmit={this.handleSubmit}>
                <div className="contentForm__fullName flexRWSBFS">
                  <p className="contentForm__label">Full Name*:</p>
                  <input className="contentForm__input" type='text' name='fullName' placeholder="Full Name*" onChange={this.myChangeHandler} />
                </div>
                <div className="contentForm__emailAddress flexRWSBFS">
                  <p className="contentForm__label">Email Address*:</p>
                  <input className="contentForm__input" type='text' name='emailAdd' placeholder="Email Address*" onChange={this.myChangeHandlerEmail} />
                </div>

                <Dropzone 
                  onDrop={accepted => {
                    this.setState({ 
                      "image": accepted });
                  }}>
                  {({getRootProps, getInputProps, isDragActive, isDragReject}) => (
                    <section className="contentForm__section item4">
                      <div {...getRootProps()}>
                        <h3>Image</h3>
                        <input {...getInputProps()}/>
                        <p className={`dropZone__p item2 ${isDragActive && !isDragReject ? "activeDrop" : ""}`}>
                          {`${this.state.image ? `Image "${this.state.image.map((item,i) => item.name)}" is uploaded`  : "Drag and drop your files here, or click to select files"}`}
                        </p>
                      </div>
                    </section>
                  )}
                </Dropzone>
                <section className="contentForm__section item5 flexCWCC">
                  <label className="item5__label">
                    <input
                      type="checkbox"
                      checked={this.state.isChecked}
                      onChange={this.toggleChange} />
                    I agree that I have submitted the necessary documents needed for this image legally.
                  </label>
                  <button className="item5__button">Submit</button>
                </section>
            </form>
          </div>
      </Fragment>
      )
    }
  }
export default ContentForm;

My Php code, I just wanted to test that it was saving the file.

<?php

$uploaddir = dirname(__FILE__).'/' . 'uploaded/';
$uploadfile = $uploaddir . basename( $_FILES['image']['name']);

if(move_uploaded_file($_FILES['image']['tmp_name'], $uploaddir))
{
  echo "The file has been uploaded successfully";
}
else
{
  echo "There was an error uploading the file";
}

?>

Turn on error reporting in PHP - https://stackoverflow.com/q/1053424/296555. Then, post back here what error you're getting. — waterloomatt, Feb 07 '20 at 23:44

score 1 · Accepted Answer · answered Feb 08 '20 at 00:05

Just looking at your PHP code, in the move_uploaded_file function you include a path in the second parameter but I believe you also need to include the full file name along with the path.

Per the move_uploaded_file documentation:

This function checks to ensure that the file designated by filename is a valid upload file (meaning that it was uploaded via PHP's HTTP POST upload mechanism). If the file is valid, it will be moved to the filename given by destination.

So, in your case, I would change this line:

move_uploaded_file($_FILES['image']['tmp_name'], $uploaddir)

To this:

move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)

How do I save a file with php from a react, axios, and dropzone front end?

1 Answers1