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` — drinchev, Aug 03 '17 at 08:24
move `const data = new FormData();` before your `for`-loop. And provide the ajax call with `data`, not `arrayOfFile`. — drinchev, Aug 07 '17 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, Aug 07 '17 at 10:10
You should write another question with the details around what you want to do. — drinchev, Aug 07 '17 at 10:51
@drinchev https://stackoverflow.com/questions/45545647/post-muiltiple-multipart-file-with-react — user1912404, Aug 07 '17 at 11:18

drinchev · Accepted Answer · 2017-08-03T08:43:42.420

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
}

What if I want to upload a list of files? Check the update please and your help is appreciated. — user1912404, Aug 07 '17 at 10:01

score 0 · Answer 2 · answered Aug 03 '17 at 07:46

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 03 '17 at 07:46

Hemant Nagarkoti

434
2
12

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 – user1912404 Aug 03 '17 at 08:04

POST a file with React.js

2 Answers2

Linked