Theo's Typesafe Cult•14mo ago

Zod File Upload validation

I'm currently making a file upload form is there any way to validate a file in zod? I tried this https://github.com/colinhacks/zod/issues/387#issuecomment-1191390673 but it didn't seem to work No matter what file i upload it just says image is required https://rentry.co/ndimv A gist of my code

// Imports go here

const MAX_FILE_SIZE = 500000 const ACCEPTED_IMAGE_TYPES = [ "image/jpeg", "image/jpg", "image/png", "image/webp", ] const formSchema = z.object({ course_id: z.string().min(1, { message: "Course name is required" }), year: z.string().m...

GitHub

Validating file input · Issue #387 · colinhacks/zod

Coming from Yup. I'm trying to validate a required file input with no success: file: z.any().refine(val => val.length > 0, "File is required") Any tips?

43 Replies

fosslover•14mo ago

that error message is defined in the formSchema isn't that enough?

Keef•14mo ago

When I was doing this I had to do it in a slightly different way The api for attaching files was a file list actually so I had to refine the inputs I’ll share what works for me in a second when I’m at my pc If I forget plz @ me

fosslover•14mo ago

guess you forgot could you please share that?

Keef•14mo ago

export const assetForm = z.object({
    file: z
        .custom<FileList>()
        .refine((fileList) => fileList.length === 1, 'Expected file')
        .transform((file) => file[0] as File)
        .refine((file) => {
            return file.size <= maxFileSize;
        }, `File size should be less than 1gb.`)
        .refine(
            (file) => ACCEPTED_IMAGE_TYPES.includes(file.type),
            'Only these types are allowed .jpg, .jpeg, .png, .webp and mp4',
        ),
});

export const assetForm = z.object({
    file: z
        .custom<FileList>()
        .refine((fileList) => fileList.length === 1, 'Expected file')
        .transform((file) => file[0] as File)
        .refine((file) => {
            return file.size <= maxFileSize;
        }, `File size should be less than 1gb.`)
        .refine(
            (file) => ACCEPTED_IMAGE_TYPES.includes(file.type),
            'Only these types are allowed .jpg, .jpeg, .png, .webp and mp4',
        ),
});

Just using an Input with type file to prompt the user works well 😄

fosslover•14mo ago

Unhandled Runtime Error
TypeError: fileList is undefined

Unhandled Runtime Error
TypeError: fileList is undefined

Am I missing something?

Keef•14mo ago

version zod, next, react are you running what browser as well (but I HOPE ITS NOT THIS) otherwsie I'm gonna be fixing this rn

fosslover•14mo ago

chrome

Keef•14mo ago

The comment you linked in OP is basically the same way I do it aside from using z.custom instead of z.any. Did you try this one? https://github.com/colinhacks/zod/issues/387#issuecomment-1535668926

GitHub

Validating file input · Issue #387 · colinhacks/zod

Coming from Yup. I'm trying to validate a required file input with no success: file: z.any().refine(val => val.length > 0, "File is required") Any tips?

fosslover•14mo ago

I don't know I just took the project from the shelf (basically I did touched it for a month or so) maybe its older lemme check zod - v3.21.4 react - 18.2.0 next - 13.4.4

Keef•14mo ago

This wasnt fun when I was implementing it. Weird to see it happen to you to but my solution not working thinkies

. The solution I shared above didn't work for me so I was hoping it would for you All the "thumbs-up" reactions on the commetn and it isn't actually working 😭 versions look fine What is your handle upload doing? Thats probably it The form state doesn't have a value set so thats why its erroring even tho locally the input might actually have something. check the state using react dev tools to see if the input has anything

fosslover•14mo ago

const handleUpload = (e: any) => { setFiles(e.target.files) } thats it

Keef•14mo ago

I'm assuming you want to let the use upload a file and submit. I do the same thing but I leave the upload in the handle submit portion and the form state holds my file

fosslover•14mo ago

it just sets the state

Keef•14mo ago

Well thats why Your formstate doesn't have it Thats why its erroring console.log(form) and you'll be able to see it you might have to dig thru the properties or just set up a

const file = watch("file")
console.log(file)

const file = watch("file")
console.log(file)

Then try uploading and see what happens

fosslover•14mo ago

iirc it logged the file path i did this long ago

Gaming

Programming

Zod File Upload validation