FileUpload: Property objectURL not accessible via the file events

[Nixfo]

Describe the bug

I wanted to customize the template of the FileUpload component. A onSelect() hook is implemented to catch the event with a FileSelectEvent parameter. I get a type error when trying to access the property objectURL of the file property of the event.

Environment

Component simplified code :

public onSelect(event: FileSelectEvent) {
    this.selectedFilesUrl = event.currentFiles.map((file) => file.objectURL); // objectURL is not supposed to exist here
}

<p-fileUpload (onSelect)="onSelect($event)">
    <ng-template pTemplate="content" let-files>
        @for (url of selectedFilesUrl; track url; let index = $index) {
        <img [src]="url" width="140px" height="140px" />
        }
    </ng-template>
</p-fileUpload>

I faced the same problem as this PrimeVue issue : primefaces/primevue#4722

The property is inserted using an any cast to insert the property objectURL to the native File object :
https://github.com/primefaces/primeng/blob/master/src/app/components/fileupload/fileupload.ts#L408
https://github.com/primefaces/primeng/blob/master/src/app/components/fileupload/fileupload.ts#L550

Reproducer

No response

Angular version

17.2.0

PrimeNG version

17.3.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Not to have type error when getting the property file.objectURL

[Alijavedofficial]

you can extend the File interface to include the objectURL property. This approach allows TypeScript to recognize the objectURL property without causing a type error.

[Nixfo]

Yes, but I would expect this extend to be in PrimeNG, I'm importing FileSelectEvent which is boxing the File

[Alijavedofficial]

you can handle the file selection event without relying on the FileSelectEvent type. You can access the files directly from the event object passed to the onSelect method

[Nixfo]

There is some workarounds of course, but what I mean is that it that the property I need objectURL should be exposed by PrimeNG. I want to be alerted by my IDE if the implementation of the event has changed, not implementing my own one and have a "fake" typing.

But maybe this is intentional not to expose this property and I'm taking this problem wrong !

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,