Why I have this problem with PrimeNG FileUpload component related to the url parameter that referer to a page that doesn't exist

Question

I am working on an Angular application using PrimeNG and I am finding some difficulties with the PrimeNG FileUpload component, this one: https://primefaces.org/primeng/showcase/#/fileupload

I was following the official documentation and source code example of this component but I have the following problem.

In my Angular component HTML code I put the same code provided by the example, something like this:

<div class="card">
  <h5>Advanced</h5>
  <p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
                multiple="multiple" accept="image/*" maxFileSize="1000000">
          <ng-template pTemplate="content">
              <ul *ngIf="uploadedFiles.length">
                  <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
              </ul>
          </ng-template>
  </p-fileUpload>
</div>

And here I noticed the first "strange" thing. This component declare the url="./upload.php" parameter on the component definition. It seemed strange to me because this is an Angular application and I have to handle all into my Angular application.

Into this component officila documentation I can read this:

FileUpload requires a url property as the upload target and a name to identify the files at backend.

What exactly means? Why? I have nothing related to a PHP application. It have all to be handled by my Angular component.

Backing to the code example then I put this array into my TypeScript code in order to contain the uploaded files:

uploadedFiles: any[] = [];

and the following method to handle the actual file upload feature (that I think will be triggered when the user click on the Update button):

onUpload(event) {
    console.log("onUpload() START");
    for(let file of event.files) {
        console.log("FILE TO BE UPLOADED: ", file);
        this.uploadedFiles.push(file);
    }

    this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
}

Running my application now I can select files to be uploaded:

The problem now is that clicking on the Update button happens something strange (as I expected due to the presence of the url="./upload.php" paremeter in the HTML definition of this upload component).

Clicking on the Update button the onUpload(event) defined in my TypeScript code is not executed and I obtain the following error into my Chrome console:

zone-evergreen.js:2845 POST http://localhost:4200/upload.php 404 (Not Found)

It seems that the PrimeNG FileUpload component is trying to perform an HTTP POST call toward the URL specified by the url parameter that doesn't exist in my application (and that have not to exist).

Why? What am I missing? How can I handle this situation in order that the entire operation is handled by my TypeScript component code? (the idea is that when the Upload button is clicked the onUpload() method is called and then the file will be saved on Firebase Storage with my custom code). How can I fix it?

AndreaNobili AndreaNobili · Accepted Answer · 2021-01-03T17:24:15

I think that I solved it by myself using the "Custom Upload" as shown in the doc:

In the HTML code of my component:

Advanced

 <p-fileUpload name="myfile[]" customUpload="true" (uploadHandler)="myUploader($event)">

             multiple="multiple" accept="image/*" maxFileSize="1000000">
       <ng-template pTemplate="content">
           <ul *ngIf="uploadedFiles.length">
               <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
           </ul>
       </ng-template>
 </p-fileUpload>

In my TypeScript code:

 myUploader(event) {
   console.log("onUpload() START");
   for(let file of event.files) {
     console.log("FILE TO BE UPLOADED: ", file);
     this.uploadedFiles.push(file);
   }
   this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
 }

Why I have this problem with PrimeNG FileUpload component related to the url parameter that referer to a page that doesn't exist

1 Answers

Advanced