上传多部分文件列表时在 springboot 上出错

Question

I am trying to upload multiple files and I am facing an issue while doing so. Can someone please suggest what is wrong?

I am enclosing relevant snippets of my code to debug better.

html code

<label>
    welcome {{name}}, welcome to new app.
</label>
<div>
    <input type="file" multiple placeholder="Select Files to be upload" accept=".xlsx" (change)=selectedfiles($event)>
</div>

upload logic

selectedfiles(event){

    this.selectedxlfiles=event.target.files;

    this.fileandinstancekeyobj.filetoupload=this.selectedxlfiles;
    this.fileandinstancekeyobj.instancekey=this.instancekey;

    this.uploadservice.uploadtoserver(this.fileandinstancekeyobj).subscribe(result=>{
      console.log(result);
    })

  }

uploadservice

uploadtoserver(selectedfileandinstacekeyobj): Observable<HttpEvent<{}>>{

     let url:string=environment.url+'uploadfile';
    const newrequest=new HttpRequest('POST',url,selectedfileandinstacekeyobj,{
      reportProgress:true,
      responseType:'text'
    });

    return this.http.request(newrequest);
  }

springboot controller

@RestController
public class uploadcontroller {

    @PostMapping("/uploadfile")
    public ResponseEntity<String> handleupload(@RequestBody uploaddto dto){
        
        System.out.println("sucessfull");
        System.out.println(dto.getInstancekey()+" "+dto.getFiletoupload().length);
        
        
        return ResponseEntity.status(HttpStatus.OK).body("ok");
    }

upload DTO

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

import org.springframework.web.multipart.MultipartFile;

class uploaddto {
    
    List<MultipartFile> filetoupload;
    String instancekey;
    public uploaddto(List<MultipartFile> filetoupload, String instancekey) {
        super();
        filetoupload=new ArrayList<MultipartFile>();
        this.filetoupload = filetoupload;
        this.instancekey = instancekey;
    }
    public List<MultipartFile> getFiletoupload() {
        return filetoupload;
    }
    public void setFiletoupload(List<MultipartFile> filetoupload) {
        this.filetoupload = filetoupload;
    }
    public String getInstancekey() {
        return instancekey;
    }
    public void setInstancekey(String instancekey) {
        this.instancekey = instancekey;
    }
    
    
}

I am receiving the following error

[org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: 
Cannot deserialize instance of `java.util.ArrayList<org.springframework.web.multipart.MultipartFile>` out of START_OBJECT token; 
nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: 
Cannot deserialize instance of `java.util.ArrayList<org.springframework.web.multipart.MultipartFile>` out of START_OBJECT token
     at [Source: (PushbackInputStream); line: 1, column: 17] (through reference chain: com.example.demo.uploaddto["filetoupload"])]

Any suggestion would be appreciated

Answer 1

I am adding this answer so that i could help someone save his day, what i did

change in uploadcontroller

this.selectedxlfiles=event.target.files;
  const data:FormData=new FormData();
for(let i=0;i<this.selectedxlfiles.length;i++){
  this.currentfile=this.selectedxlfiles[i];
  data.append('selectedfile',this.currentfile);
}
data.append('instancekey',this.instancekey);
this.uploadservice.uploadtoserver(data).subscribe(Response=>{
  console.log(Response);
})

changes in upload service

uploadtoserver(data:FormData): Observable<HttpEvent<{}>>{

      let url:string=environment.url+'uploadfile';
    // console.log(url);
    //  const data: FormData=new FormData();
    //  data.append('selectedfile',selectedfile);
    //  data.append('instancekey',instancekey);
    const newrequest=new HttpRequest('POST',url,data,{
      reportProgress: true,
      responseType: 'text',
    });
    

    return this.http.request(newrequest);
    //return this.http.post(url,selectedfiles);
  }

changes in springboot controller

@RestController
public class uploadcontroller {

    @PostMapping("/uploadfile")
    public ResponseEntity<String> handleupload(@ModelAttribute uploaddto dto){
        
        System.out.println("sucessfull");
        System.out.println(dto.getInstancekey()+" "+dto.getFiletoupload().length);
        
        
        return ResponseEntity.status(HttpStatus.OK).body("ok");
    }

the only change in controller @modelattribute