Theo's Typesafe Cult•5mo ago

Zod not validating file input

z.object({
        userId: z.string(),
        headerImage: z
          .instanceof(File)
          .refine((file) => {
            return !file || file.size <= MAX_UPLOAD_SIZE;
          }, "File size must be less than 2 MB")
          .refine((file) => {
            return ACCEPTED_FILE_TYPES.includes(file.type);
          }, "File must be a PNG"),
        // .any(),
      }),

z.object({
        userId: z.string(),
        headerImage: z
          .instanceof(File)
          .refine((file) => {
            return !file || file.size <= MAX_UPLOAD_SIZE;
          }, "File size must be less than 2 MB")
          .refine((file) => {
            return ACCEPTED_FILE_TYPES.includes(file.type);
          }, "File must be a PNG"),
        // .any(),
      }),

this is the zod schema but its throwing "Input not instance of File" im checking that its a file on client also

function uploadFile(e: ChangeEvent<HTMLInputElement>) {
    let file;

    if (e.target.files) {
      file = e.target.files[0];
    }

    if (file !== undefined) {
      console.log(file);
      mutate({ userId, headerImage: file });
    }
  }

function uploadFile(e: ChangeEvent<HTMLInputElement>) {
    let file;

    if (e.target.files) {
      file = e.target.files[0];
    }

    if (file !== undefined) {
      console.log(file);
      mutate({ userId, headerImage: file });
    }
  }

6 Replies

Juraj98•5mo ago

Is the mutate function from TRPC with SuperJSON?

aditya•5mo ago

yup it's from basic t3 boilerplate

aditya•5mo ago

https://github.com/aditya-exe/flowfolio

GitHub

GitHub - aditya-exe/flowfolio

Contribute to aditya-exe/flowfolio development by creating an account on GitHub.

aditya•5mo ago

here's the repo if you need

Juraj98•5mo ago

So, I'm pretty sure the problem is in serialization. As you pass data from client to server, it needs to be serialized using SuperJSON, so it doesn't stay as File. If you really wanted to do this, you'd need to get the ArrayBuffer from the File, than create custom handler on SuperJSON(using registerCustom function) for handling ArrayBuffer, and construct the File again on server. But, I'm 99% sure this is not something you want to do. Looking at you code, you want to upload the file into Supabase storage. If you're doing that, you should upload the file directly from client to Supabase. Because if you pass it trough your own server, you're eating the cost of both egress to and out of the function, plus you're doubling upload time. Instead take a look at createSignedUploadUrl. Use this function to create a url for upload on your server, return in to client, and upload the file directly there from client.

aditya•5mo ago

intresting ill take a look at that, thanks a lot!!

Gaming

Programming

Zod not validating file input