The method onUpload is not running in p-fileUpload of Primeng

Question

I am declaring a FileUpload in my html as follows

<p-fileUpload  name="file"  url="http://localhost:8080/integra/services/upload" (onUpload)="onUpload($event)"  accept=".txt"></p-fileUpload>

which is pointing to my backend

    @PostMapping(value="/upload", produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ResponseEntity uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
        File convertFile = new File("C:\\upload\\"+file.getOriginalFilename());
        convertFile.createNewFile();
        FileOutputStream fout = new FileOutputStream(convertFile);
        fout.write(file.getBytes());
        fout.close();
        return new ResponseEntity("OK", HttpStatus.OK);
    }

But when executing my onload event in my typescript, it doesn't work ... and even a console.log is placed to test but it doesn't work. this is my typescript

  onUpload(event) {
    console.log(event.files.length);
    console.log(event.progress);
  }

When I run the fileupload the loading bar is stuck and does not allow me to perform another file upload. Therefore, when the loading bar is never completed, the mentioned event is not executed enter image description here

Finally, the file is saved in the mentioned path but I cannot handle the event correctly

I would be grateful that someone could help me. Thank you

Answer 1

i was facing the same problem with 'onUpload' method (did not work for me) , You can use uploadHandler and customUpload="true" instead , it worked like a charm !

Here is some sample code:

HTML

```
<p-fileUpload #fileInput
  name="files" 
  (uploadHandler)="onUpload($event)"
  customUpload="true"
></p-fileUpload>
```

TS

  onUpload(event) {
    console.log('onUpload', event); 
  }