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(),
      }),

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 });
    }
  }

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 });
    }
  }

Juraj98•6/11/24, 9:34 PM

Is the mutatemutate function from TRPC with SuperJSON?

adityaOP•6/12/24, 5:31 AM

yup it's from basic t3 boilerplate

adityaOP•6/12/24, 5:32 AM

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

GitHub

GitHub - aditya-exe/flowfolio

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

adityaOP•6/12/24, 5:32 AM

here's the repo if you need

Juraj98•6/12/24, 8:47 AM

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 FileFile.

If you really wanted to do this, you'd need to get the ArrayBufferArrayBuffer from the FileFile, than create custom handler on SuperJSON(using registerCustomregisterCustom function) for handling ArrayBufferArrayBuffer, and construct the FileFile 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.

adityaOP•6/13/24, 6:06 AM

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

Zod not validating file input

Similar Threads

Similar Threads

Similar Threads