Receiving uploaded file from client , rest

Question

I am sending to backend a file, this is the upload code:

export class FileUploadComponent {

  @Input() multiple: boolean = false;
  @ViewChild('fileInput') inputEl: ElementRef;

  constructor(private http: Http) {}

  upload() {
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
    let fileCount: number = inputEl.files.length;
    let formData = new FormData();
    if (fileCount > 0) { // a file was selected
      for (let i = 0; i < fileCount; i++) {
        formData.append('file[]', inputEl.files.item(i));
      }
      this.http
        .post('http://localhost:8080/upload', formData).toPromise().then(() => console.log('success')).catch(() => console.log('error'));
    }
  }
}

Now on the backendside I'd like to receive it via controller, but I don't know how to map the file property, following gives null's:

 public @ResponseBody String handleFileUpload(@RequestBody MultipartFile file)

Possible duplicate of [AngularJS Formdata file array upload](https://stackoverflow.com/questions/33920248/angularjs-formdata-file-array-upload) — David Florez, Jun 06 '17 at 20:06

score 1 · Accepted Answer · answered Jun 07 '17 at 00:28

Your method signature is incorrect.

@RequestBody annotation parameters maps to the HTTP request body.

@RequestParam annotation parameters maps to the specific Servlet request parameters.

Use the following:

public @ResponseBody String handleFileUpload(@RequestParam MultipartFile file)

If you are sending multiple, then use array:

public @ResponseBody String handleFileUpload(@RequestParam MultipartFile[[] file)

Receiving uploaded file from client , rest

1 Answers1