0

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{}

user1912404
  • 386
  • 4
  • 11
  • 26
  • 1
    [`FormData` will not allow you to inspect it's object](https://stackoverflow.com/questions/17066875/how-to-inspect-formdata). Only way to check if the files are properly passed is by examining the AJAX call ( via network tab ). `console.log( data );` will always show the same object and not the files themselves. – drinchev Aug 07 '17 at 12:35
  • Your code should work – drinchev Aug 07 '17 at 12:35
  • @drinchev this is the payload: ------WebKitFormBoundaryx290rYq0fZYR1L6x Content-Disposition: form-data; name="file"; filename="ExcelFileCore-1.xlsx" Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ------WebKitFormBoundaryx290rYq0fZYR1L6x Content-Disposition: form-data; name="file"; filename="ExcelFileCore-1 - Copy.xlsx" Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ------WebKitFormBoundaryx290rYq0fZYR1L6x-- – user1912404 Aug 07 '17 at 12:36
  • 1
    Yep, so you have uploaded two files `ExcelFileCore-1.xlsx`, `ExcelFileCore-1 - Copy.xlsx`. The backend should've captured them if works properly. – drinchev Aug 07 '17 at 12:40
  • @drinchev its seems that the back-end is working fine. Check the answer below. Note that I don't get any response from the endpoint. – user1912404 Aug 07 '17 at 12:57

1 Answers1

2
        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.

user3042916
  • 87
  • 3
  • 12
  • 1
    Can you provide the whole controller end-point? `file` in this case should be an array of `MultipartFile`, not a single `MultipartFile`. Since the front-end will send you an array of the files. Check [5. Multiple File upload](https://www.mkyong.com/spring-mvc/spring-mvc-file-upload-example/) from here. – drinchev Aug 07 '17 at 13:07
  • `MultipartFile[] arrayOfMultipartFile = {multipartFile1, multipartFile2}; vendorService.readExcelFile(arrayOfMultipartFile);` – user3042916 Aug 07 '17 at 13:10
  • 1
    Looks like you did not paste the controller code and just a line from there. Where do you intercept the the request parameters is what I"m looking for. Anyway this question is about front-end and react, so I don't think solving Java will help anyone else here. You can create another question on how to save multiple files with Java, you will get more help there I guess. – drinchev Aug 07 '17 at 13:16