[Fixed] Simulate upload with PrimeNG file upload component?

Issue

I am trying to use the PrimeNG file upload component in a prototype I am making. The demo on their page simulates the files being uploaded, with a progress bar ultimately displaying the message:

Looking at their code, they are using a file upload.php which is a dummy file that only contains

<?php echo '<p>Fake Upload Process</p>'; ?>

So, I added upload.php and I get the message in the screenshot but not the progress bar.

Looking at the TS, it looks like all that’s there is:

onUpload(event) {
 for (const file of event.files) {
   this.uploadedFiles.push(file);
 }

 this.msgs = [];
 this.msgs.push({ severity: 'info', summary: 'File Uploaded', detail: '' });
}

Am I missing something? I’m just trying to get the demo they have to run in my prototype, to simulate the UI of uploading.

Solution

For this implement (onProgress)="progressReport($event)" on the p-file upload as

<p-fileUpload #fileuploader [customUpload]="true"  (onProgress)="progressReport($event)"

then in ts file
you can use
use you get access to p-upload via @ViewChild
and then in the code where you are receiving updates of the uploaded percentage, use

      this.fileuploader.onProgress.emit(this.value);

and on the custom onProgress handler we can impliment as

progressReport($event: any) {
this.fileuploader.progress = $event;}

this property progress is a public property I came across while searching for this feature
so this can be used to have working file upload progress bar.

If still any doubts please feel free to contact