react dropzone cannot post with axios

Question

I'm trying to use react-dropzone in my code and making a POST request to the server with axios, but the POST request always fails and I keep getting the following error:

Uncaught (in promise) Error: Request failed with status code 500

This is my component

constructor(props) {
  super(props);
  this.state = {
    accepted: [],
  };

  ['handleChange', 'handleValidSubmit'].forEach(v => {
    this[v] = this[v].bind(this);
  });
}

handleValidSubmit(event, values) {
  const data = {
    accepted: this.state.accepted,
  };
  console.log(data);
  axios({
    method: 'post',
    url:
      'https://oc6tq8iop5.execute-api.ap-southeast-1.amazonaws.com/dev/upload',
    data: JSON.stringify(data),
  }).then(data => {
    console.log(data);
    onDrop: accepted => {
      accepted.forEach(file => {
        req.attach(file.name, file);
      });
      req.end(callback);
      var formData = new FormData();
      formData.append('gambar', values.accepted);
      console.log(formData);
    };
  });
}

handleChange(event) {
  const { target } = event;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const { name } = target;

  this.setState({
    [name]: value,
  });
}

And this is my render methods

<div className="dropzone">
  <Dropzone
    accept="image/jpeg, image/png, image/jpg"
    onDrop={accepted => {
      this.setState({ accepted });
    }}
    maxSize={200000}
    multiple={false}
  >
    <p>Maksimal 2 MB (JPG/PNG)</p>
  </Dropzone>
  {this.state.accepted.map(f => (
    <span key={f.name}>
      {f.name} - {f.size} bytes
    </span>
  ))}
</div>

Answer 1

You just need to send header with axios,

const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();

values.map((file) => {
  fd.append('File[]',file);
});

axios.post(`${ROOT_URL}/ImageUpload`, fd, config)
  .then((response) => {
    callback(response);
  })
  .catch(error => {
      errorResponse(error);
  })