CODEWITHSUNDEEP
javascriptreactjsmultipartform-datareactjs-flux
user1912404
user1912404

Reputation: 396

POST muiltiple multipart file with React

I put this questions in reference POST a file with React.js

I would like now to send a list of files to the endpoint.

My input component:

<input onChange={(e) => Actions.uploadXLS(e.target.files)} multiple type="file" name="xlsz" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style={{ display: 'none' }}/>

The action handler:

  uploadXLS(files) {
    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{}

Upvotes: 0

Views: 1449

Answers (1)

user3042916
user3042916

Reputation: 87

        File file = new File("/Users/user1/Documents/VendorDbResources/ExcelFileCore-1.xlsx");
        FileInputStream input = new FileInputStream(file);
        MultipartFile multipartFile1 = new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));

        file = new File("/Users/user1/Documents/VendorDbResources/ExcelFileCore-2.xlsx");
        input = new FileInputStream(file);
        MultipartFile multipartFile2 = new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));

        MultipartFile[] arrayOfMultipartFile = {multipartFile1, multipartFile2};

        if (arrayOfMultipartFile.length > 0)
            return vendorService.readExcelFile(arrayOfMultipartFile);
        else
            return null;

I have tried backend functionality with static data.above you can see i created an array of multipart file and provided to the service implementation.

And it's working fine. Entries can be seen in db as well.

Upvotes: 2

Related Questions