FileUpload: getting Property 'objectURL' does not exist on type 'File' on custom uploader

[fbnlsr]

Describe the bug

I'm following the example in the documentation regarding custom uploaders on the FileUpload component, and I get a type error on objectURL.

  async function upload(event: FileUploadUploaderEvent) {
    const files = event.files as File[]

    if (files[0]) {
      const file = files[0] as File
      const ext = file.name.split('.').pop() as string
      let reader = new FileReader()
      let blob = await fetch(file.objectURL).then((r) => r.blob())
      reader.readAsDataURL(blob)

      reader.onloadend = function () {
        const base64data = reader.result as string
        const data = new FormData()
        data.append('avatar', base64data)
        data.append('extension', ext)

        // ...rest of the method

        }
    }
  }

As far as I know, objectURL is not a property of File, yet the object returned contains said property. The code works fine but Typescript is not happy about what's going on, and I can't figure out what's wrong.

Reproducer

-

PrimeVue version

3.37.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Typescript should not yell at me.

[bdebashi]

Has there been any updates on this? Facing the same issue.

[cdowning]

Any updates on this? I am running into the same issue.

[dkraemer]

I'm using URL.createObjectURL(file) as a workaround. Reference: MDN

[a0s]

Upload example uses objectURL and it works but the compiler doesn't know about it

[BenJackGill]

Can confirm this also. Am using the URL.createObjectURL(file) workaround like so:

Inside <script>:

const fileObjectURL = (file: File) => {
  return URL.createObjectURL(file);
};

Inside <template>:

<img
  :alt="file.name"
  :src="fileObjectURL(file)"
  height="50"
  role="presentation"
  width="100"
/>