File Upload component loading initial files creates image url that is not pointing to the image

Describe the bug

I have the below component:

<p-fileUpload #files mode="advanced" name="myfile[]" chooseStyleClass="p-button-rounded" uploadStyleClass="p-button-rounded p-button-success" cancelStyleClass="p-button-rounded p-button-danger"
            removeStyleClass="p-button-rounded p-button-danger" [customUpload]="true" [files]="uploadedImageFiles" (uploadHandler)="onUpload($event)" [multiple]="true" enctype="multipart/form-data" (onSelect)="selectFile($event)"
            (onRemove)="onRemoved($event)" [disabled]="uploadedImageFiles.length == 50" [showUploadButton]="uploadedImageFiles.length >= 10" accept="image/*" [fileLimit]="50" [maxFileSize]="10485760">
            <ng-template pTemplate="toolbar">
                <div class="py-3">
                    * En Az 10 Adet Fotoğraf Yüklenmesi Zorunludur!
                    {{ uploadedImageFiles.length }} / 10
                </div>
                <div class="py-3">
                    * Dosya Boyutunun En Fazla 50 Mb Olması Gerekmektedir!
                </div>
            </ng-template>
            <!-- <ng-template pTemplate="file" let-files>
                <ul *ngIf="uploadedImageFiles">
                    <li *ngFor="let imageFile of uploadedImageFiles">
                        <div class="flex justify-content-center">
                            <div> <img [src]="imageFile.stream" style="max-width: 100%; max-height: 100%;"> </div>
                            <div>
                                {{ imageFile.name }} - {{ imageFile.size }} bytes
                            </div>
                        </div>
                    </li>
                </ul>
            </ng-template> -->
            <ng-template pTemplate="content">
                <!-- <ul *ngIf="uploadedImageFiles.length">
                    <li *ngFor="let imageFile of uploadedImageFiles">
                        {{ imageFile.name }} - {{ imageFile.size }} bytes
                    </li>
                </ul> -->
            </ng-template>
        </p-fileUpload>

In typescript i have the below code:

`async (fileData: Uint8Array) => { // file = new Uint8Array(file); const resEncodedMessage = new TextEncoder().encode(fileData as any); const mime = this.fileUploadUtil.getMimeType( this.fileUploadUtil.getFileExtension( fileName, ), );

let base64 =
    this.fileUploadUtil.getBase64String(
        fileData,
        this.fileUploadUtil.getFileExtension(
            fileName,
        ),
    );
console.log('base64', base64);
let fileAsFile = new File(
    [resEncodedMessage],
    fileName,
    {
        type: mime,
    },
);
console.log('fileAsFile', fileAsFile);

this.uploadedImageFiles.push(fileAsFile);
// if (
//     this.uploadedImageFiles.length ==
//     response.length
// ) {
//     console.log(
//         'this.uploadedImageFiles',
//         this.uploadedImageFiles,
//     );
//     // this.ref.close(this.uploadedImageFiles);
// }

File comes as string, or Uint8Array (I've tried both)

The image content is not shown, it actually creates a blob url, however the images are not shown:

I don't think this is directly related with prime ng component. However, I wonder if there is a solution.

Environment

Macos Sonoma

Reproducer

No response

Angular version

16.1.0

PrimeNG version

16.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.12.1

Browser(s)

Chrome and Safari

Steps to reproduce the behavior

No response

Expected behavior

The images are shown in the ui.

primefaces / primeng