Open pieterjanmaes opened 3 days ago
Try to use Zod's z.instanceof
. z.custom
seems to be okay for object literals or string template/literals.
I think in your situation you'd need to do something like this:
z.object({
picture: z.union([z.instanceof(File), z.instanceof(FileList)])
.transform((val) => {
if (val instanceof File) return val;
if (val instanceof FileList) return val[0];
return null;
})
})
Hi @noook, thanks for your reply.
When I try it, my app won't build and i get an 500 error:
FileList is not defined
When I use File alone and I select an image, i get:
Input not instance of File
z.object({
picture: z.instanceof(File)
.transform((val) => {
if (val instanceof File) return val;
if (val instanceof FileList) return val[0];
return null;
})
})
And when i make the component 'clientOnly' i get Invalid input
as error
Can you try to make a reproducible example so that I can play with it ?
@noook, sure, here you go!
https://stackblitz.com/edit/nuxt-starter-mkx9qp?file=app.vue
I tried with this example:
https://stackblitz.com/edit/nuxt-starter-adyxmi?file=components%2FMyForm.client.vue
Basically what I did:
.client.vue
file. This allows mentioning the FileList
class. I think you can bypass this by doing import.meta.client ? z.instanceof(FileList) : z.any()
. This shouldn't try to reach for an undefined class server-sideFileList
@change
eventHowever, I can't figure out why the transform is not working, it still outputs me a FileList on the Zod's parse output.
For what version of Nuxt UI are you asking this question?
v2.x
Description
How can i use Zod to validate an UInput file field?
Let's say you have the following code: (I found the example over here.)
As aspected the following onChange function logs a FileList
But when I log val in the transform function of Zod
I get a string like this:
Can someone please help me out, i'm looking for a few days now for a solution.