简体   繁体   中英

Can primeng p-fileupload component handle return type out-of-the-box?

I'm using primeng p-fileupload component to upload a single file. Back-end API is Spring Boot that uploads file to hdfs and returns the path. The file uploads fine but the onUpload() angular function is not called. I know this is due to the returned path variable as with a void return type it works. How can I get the path back with the default p-fileupload component (without having to write a custom upload function)?

<p-fileUpload name="file" url="http://<MY-IP>:8080/upload" accept=".csv" maxFileSize="1000000" (onUpload)="onUpload($event)"></p-fileUpload>
onUpload(event) {
    for (let file of event.files) {
      console.log(file);
      this.uploadedFiles.push(file);
      console.log(this.uploadedFiles);
    }
 }

Figured this out.

My Spring Boot API was returning a String instead of JSON. Correct code returns ResponseEntity with a response object that has one variable called path (this is serialized to JSON under the hood).

    @PostMapping("/upload")
    public ResponseEntity upload(@RequestParam("file") MultipartFile file) {
        final String path = fileUploadService.uploadFile(file, fileStorageProperties.getUploadDir());
        return ResponseEntity.status(HttpStatus.CREATED).body(new UploadFileResponse(path));
    }

In Angular can get returned JSON with event.originalEvent.body.path .

onUpload(event) {
    for (let file of event.files) {
        let path: string = event.originalEvent.body.path;
        console.log(path);
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM