Using JSZip with Zod and tRPC
I am making a uploadRouter for my website where a user can upload 5-10 images. I want to be able to zip those image and then upload it to a r2 endpoint.
I never really worked with zipping and image schemas in Zod and tRPC so im not sure on what to do.
Here is what I have so far
This is the error im getting
I never really worked with zipping and image schemas in Zod and tRPC so im not sure on what to do.
Here is what I have so far
import { router, publicProcedure, protectedProcedure } from "../trpc";
import { z } from "zod";
import JSZip from "jszip";
const MAX_FILE_SIZE = 5000000;
const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
const imageSchema = z.object({
image: z
.any()
.refine((file) => file?.size <= MAX_FILE_SIZE, 'Maximum file size is 50MB')
.refine((file) => ACCEPTED_IMAGE_TYPES.includes(file?.type), 'Unsupported file type')
})
export const uploadRouter = router({
upload: protectedProcedure
.input(imageSchema.array().min(5).max(10))
.mutation(({ ctx, input }) => {
const zip = new JSZip();
const remoteZips = input.map((image) => {
// ERROR HERE
zip.file(image.name, image)
});
})
})import { router, publicProcedure, protectedProcedure } from "../trpc";
import { z } from "zod";
import JSZip from "jszip";
const MAX_FILE_SIZE = 5000000;
const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
const imageSchema = z.object({
image: z
.any()
.refine((file) => file?.size <= MAX_FILE_SIZE, 'Maximum file size is 50MB')
.refine((file) => ACCEPTED_IMAGE_TYPES.includes(file?.type), 'Unsupported file type')
})
export const uploadRouter = router({
upload: protectedProcedure
.input(imageSchema.array().min(5).max(10))
.mutation(({ ctx, input }) => {
const zip = new JSZip();
const remoteZips = input.map((image) => {
// ERROR HERE
zip.file(image.name, image)
});
})
})This is the error im getting
No overload matches this call.
Overload 1 of 4, '(path: string, data: null, options?: (JSZipFileOptions & { dir: true; }) | undefined): JSZip', gave the following error.
Argument of type '{ image?: any; }' is not assignable to parameter of type 'null'.
Overload 2 of 4, '(path: string, data: string | number[] | Uint8Array | ArrayBuffer | Blob | ReadableStream | Promise<string | number[] | Uint8Array | ArrayBuffer | Blob | ReadableStream>, options?: JSZipFileOptions | undefined): JSZip', gave the following error.
Argument of type '{ image?: any; }' is not assignable to parameter of type 'string | number[] | Uint8Array | ArrayBuffer | Blob | ReadableStream | Promise<string | number[] | No overload matches this call.
Overload 1 of 4, '(path: string, data: null, options?: (JSZipFileOptions & { dir: true; }) | undefined): JSZip', gave the following error.
Argument of type '{ image?: any; }' is not assignable to parameter of type 'null'.
Overload 2 of 4, '(path: string, data: string | number[] | Uint8Array | ArrayBuffer | Blob | ReadableStream | Promise<string | number[] | Uint8Array | ArrayBuffer | Blob | ReadableStream>, options?: JSZipFileOptions | undefined): JSZip', gave the following error.
Argument of type '{ image?: any; }' is not assignable to parameter of type 'string | number[] | Uint8Array | ArrayBuffer | Blob | ReadableStream | Promise<string | number[] | 
Was this page helpful?
