Error createObjectURL while proxy a file

[Laxy317]

Bug Description

I can't use ‘createObjectURL’ on a proxied file.

interface PreUploadFileProxy {
  files: Record<string, File>
}
const preUploadFileProxy = proxy<PreUploadFileProxy>({ files: {} })

<input
      type="file"
      onChange={(e) => {
        const file = e.target.files[0]
        console.log(URL.createObjectURL(file)) // It‘s okay
        preUploadFileProxy.files['test'] = file
        console.log(URL.createObjectURL(preUploadFileProxy.files['test'])) // TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. Same error with 'useSnapshot'
      }}
/>

Reproduction Link

https://codesandbox.io/p/sandbox/valtio-to-do-list-forked-z7f97m?from-embed=&workspaceId=390a0bb3-79cb-476b-a0c1-12eaeae7ba71

[dai-shi]

ObjectURL seems like a non-proxifyable object.

You need to mark it a ref:

- preUploadFileProxy.files['test'] = file
+ preUploadFileProxy.files['test'] = ref(file)

[overthemike]

To expand a bit, URL.createObjectURL is looking specifically for a Blob, File, or a MediaSource. As Dai-shi said, it won't take a proxy. What you can do as an alternative is store the metadata for the file in the proxy and then use a WeakMap with the proxy object as the key to store the file.