POST a file with React.js

Question

The end user is supposed to upload through a file browser an excel file:

Answer 1

Try to use good file uploader and inspect element check your network tab whether you api call that is file upload is sending proper file data as expected by the server. Test the API from Postman if its working then it means front-end code has problem and you can compare the headers what wrong items you are sending.

Hope this debugging method will help you to recognize your mistake.

Answer 2

Passing a file to the backend is done via multipart/form-data forms.

If you inspect the request that you send to the backend right now, you will see that your request does not send ( probably ) a multipart/form-data.

You can check for reference What does enctype='multipart/form-data' mean? question.

Your code should look something like :

callUploadXLS: {
    remote( state, file ) {
                // ^ make sure that `file` here is the same target.files[0]. It should be `File` Object

      // Will turn your form to `multipart/form-data`
      var data = new FormData();
      data.append('file', file);

      const url = `${base}/vendor/form`;
      return $http.instance.api.post( url, data );

    },
    success: Actions.XLSUploaded,
    error: Actions.fail
}