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.