Angular P-FileUpload ng-template not working

Question

I am trying to use p-fileupload in angular for the pdf files, when I select the file, I want to put the pdf image along with the file name. For that, I created the ng-template for the file upload but apparently I am getting the template version as well as the default version of the file upload. How I am remove the default version of the p-fileupload files.

here is the code for my file uploader.

<p-fileUpload
  #uploader
  [multiple]="true"
  [maxFileSize]="1000000"
  [fileLimit]="5"
  dragDropSupport="true"
  [showUploadButton]="false"
  [customUpload]="true"
  (onSelect)="onSelectFile($event, uploader)"
  accept="application/pdf"
>
  <ng-template pTemplate="content">
    <ul *ngIf="uploader.files">
      <li *ngFor="let file of uploader.files">
        <img
          src="/assets/images/pdfimage.png"
        />
        {{ file.name }}
      </li>
    </ul>
  </ng-template>
</p-fileUpload>

Answer 1

The files of the file upload are avaiable at _files property instead of files. This should show the values.

  <ng-template pTemplate="content">
    <ul *ngIf="uploader.files">
      <li *ngFor="let file of uploader._files"> <!--  changed here! -->
        <img
          src="/assets/images/pdfimage.png"
        />
        {{ file.name }}
      </li>
    </ul>
  </ng-template>

Related Answers with Working Examples:

In the (onRemove) function of a p-fileUpload, is it possible to get a list of the remaining files?

https://stackoverflow.com/questions/79246000/in-the-onremove-function-of-a-p-fileupload-is-it-possible-to-get-a-list-of-th