POST a file with React.js

Question

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

<FloatingActionButton title="Upload excel" primary className="import-vendor"
                      containerElement="label"
                      label="Browse file">
      <input onChange={(e) => Actions.uploadXLS(e.target.files[0])} 
             type="file" 
             name="xls" 
             accept="application/vnd.ms-excel" 
             style={{ display: 'none' }}/>
      <UploadIcon/>
</FloatingActionButton>

Action :

uploadXLS(file) {
    this.getInstance().callUploadXLS( file );
}

Service :

callUploadXLS: {
    remote( state, data ) {
        const url = `${base}/vendor/form`;
        return $http.instance.api.post( url, data );
    },
    success: Actions.XLSUploaded,
    error: Actions.fail
}

This file should be sent to a POST REST endpoint built with Spring boot accepting a multipart file. The endpoint does not recognize sending the file like this

error: "Internal Server Error"
exception :"org.springframework.web.multipart.MultipartException"
message : "Current request is not a multipart request"
path : "/vendor/form"
status : 500
timestamp : 1501747384079

How can I post the the excel file?

Edit: I am trying now to post a list of file:

const arrayOfFile = [];
let i = 0;
for ( i = 0; i < files.length; i++ ) {
  const data = new FormData();
  arrayOfFile[i] = data.append( 'file', files[i] );
}
this.getInstance().callUploadXLS( arrayOfFile );

but data.append( 'file', files[i] ); is always returnin undifined

Can you add the action code here as well Actions.uploadXLS — Ivan Drinchev
– Ivan Drinchev, Commented Aug 3, 2017 at 8:24
move const data = new FormData(); before your for-loop. And provide the ajax call with data, not arrayOfFile. — Ivan Drinchev
– Ivan Drinchev, Commented Aug 7, 2017 at 10:05
let i = 0; const data = new FormData(); for ( i = 0; i < files.length; i++ ) { data.append( 'file', files[i] ); } console.log(data); this.getInstance().callUploadXLS( data ); console prints: FormData{} — user1912404
– user1912404, Commented Aug 7, 2017 at 10:10

Ivan Drinchev · Accepted Answer · 2017-08-03 08:43:42Z

3

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
}

edited Aug 3, 2017 at 8:43

answered Aug 3, 2017 at 8:36

Ivan Drinchev

19.6k4 gold badges69 silver badges97 bronze badges

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

1 Comment

user1912404 Over a year ago

What if I want to upload a list of files? Check the update please and your help is appreciated.

Hemant Nagarkoti · Accepted Answer · 2017-08-03 07:46:09Z

0

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.

answered Aug 3, 2017 at 7:46

Hemant Nagarkoti

4342 silver badges12 bronze badges

1 Comment

user1912404 Over a year ago

error : "Internal Server Error" exception : "org.springframework.web.multipart.MultipartException" message : "Current request is not a multipart request" path : "/vendor/form" status : 500 timestamp : 1501747384079

Collectives™ on Stack Overflow

POST a file with React.js

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related