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

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

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[] |

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[] |

Eelpupper I am making a uploadRouter for my website where a user can upload 5-10 images. I...

Sunless•6/10/23, 6:54 PM

const zip = new JSZip();

input.forEach((file) => {
        const data = fs.readFileSync(file.path);
        zip.file(file.originalname, data);
      });

const content = await zip.generateAsync({ type: 'nodebuffer' });
return content;

const zip = new JSZip();

input.forEach((file) => {
        const data = fs.readFileSync(file.path);
        zip.file(file.originalname, data);
      });

const content = await zip.generateAsync({ type: 'nodebuffer' });
return content;

Sunless•6/10/23, 6:54 PM

try this

Sunless•6/10/23, 6:54 PM

you're using it wrong

elpupperOP•6/10/23, 6:55 PM

hmm

elpupperOP•6/10/23, 6:55 PM

my schema is most def wrong

Sunless•6/10/23, 6:55 PM

also, maybe this should be a better zod schema

z.array(z.object({
  fieldname: z.string().refine((value) => value === 'images', {
    message: 'Invalid fieldname',
  }),
  originalname: z.string().min(3),
  encoding: z.string().optional(),
  mimetype: z.string().refine((value) => value.startsWith('image/'), {
    message: 'Invalid file type',
  }),
  destination: z.string().optional(),
  filename: z.string().optional(),
  path: z.string().optional(),
  size: z.number().positive(),
}));

z.array(z.object({
  fieldname: z.string().refine((value) => value === 'images', {
    message: 'Invalid fieldname',
  }),
  originalname: z.string().min(3),
  encoding: z.string().optional(),
  mimetype: z.string().refine((value) => value.startsWith('image/'), {
    message: 'Invalid file type',
  }),
  destination: z.string().optional(),
  filename: z.string().optional(),
  path: z.string().optional(),
  size: z.number().positive(),
}));

elpupperOP•6/10/23, 6:55 PM

yep

Sunless•6/10/23, 6:56 PM

you're using 1 object

Sunless•6/10/23, 6:56 PM

it should be an array

SSunless you're using 1 object

elpupperOP•6/10/23, 6:56 PM

upload: protectedProcedure
        .input(imageSchema.array().min(5).max(10))

upload: protectedProcedure
        .input(imageSchema.array().min(5).max(10))

Eelpupper ``` upload: protectedProcedure .input(imageSchema.array().min(5).max(10)...

Sunless•6/10/23, 6:56 PM

hmm

Sunless•6/10/23, 6:56 PM

didn't saw that

elpupperOP•6/10/23, 6:57 PM

its not making any sense to me

elpupperOP•6/10/23, 6:57 PM

what u sent

elpupperOP•6/10/23, 6:57 PM

nor does mine either

elpupperOP•6/10/23, 6:57 PM

cause it was just ripped from a blog

elpupperOP•6/10/23, 6:58 PM

and even the blog didnt make sense

elpupperOP•6/10/23, 6:58 PM

basically what i need is to get the images that the user uploaded

elpupperOP•6/10/23, 6:58 PM

so for example i select 5 to 10 images on the website

elpupperOP•6/10/23, 6:59 PM

click upload

elpupperOP•6/10/23, 6:59 PM

then it goes to this trpc endpoint

elpupperOP•6/10/23, 6:59 PM

and zips them

Eelpupper then it goes to this trpc endpoint

Sunless•6/10/23, 7:00 PM

ya know....... you can just.... use a nextjs raw http endpoint to handle file uploads

SSunless ya know....... you can just.... use a nextjs raw http endpoint to handle file up...

elpupperOP•6/10/23, 7:01 PM

hmm that is true

Sunless•6/10/23, 7:01 PM

I've always used those for doing file stuff

Sunless•6/10/23, 7:01 PM

as the raw request object is available

elpupperOP•6/10/23, 7:01 PM

ok im gonna do that

SSunless I've always used those for doing file stuff

elpupperOP•6/10/23, 7:04 PM

is there a guide or documentation u can link me to?

Eelpupper is there a guide or documentation u can link me to?

Sunless•6/10/23, 7:05 PM

hold up I have a code snippet I wrote a few days ago

Sunless•6/10/23, 7:08 PM

hmm

Sunless•6/10/23, 7:08 PM

this is what I wrote, it's saving one image a time though

Sunless•6/10/23, 7:10 PM

you'll have to read the formidable docs to handle first parsing multiple files, then saving them. Or hold up a minute

Sunless•6/10/23, 7:10 PM

wait don't use that it'll get messier that way

elpupperOP•6/10/23, 7:11 PM

alr

elpupperOP•6/10/23, 7:11 PM

i just want a way to get the images

elpupperOP•6/10/23, 7:11 PM

and check if they are actually images

elpupperOP•6/10/23, 7:11 PM

and check if they are smaller than 50 mb thats it

Sunless•6/10/23, 7:11 PM

I have something along those lines, let me remember where I saw it

Sunless•6/10/23, 7:12 PM

*proompting some code into existance here

Sunless•6/10/23, 7:12 PM

import { NextApiRequest, NextApiResponse } from 'next';
import multer from 'multer';
import JSZip from 'jszip';
import fs from 'fs';

const upload = multer({ dest: 'uploads/' });

// Disable built-in body parsing
export const config = {
  api: { bodyParser: false },
};

export default upload.array('images', 5, async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const zip = new JSZip();

    req.files.forEach((file: Express.Multer.File) => {
      const data = fs.readFileSync(file.path);
      zip.file(file.originalname, data);
    });

    const zipContent = await zip.generateAsync({ type: 'nodebuffer' });

    // Save the zip file
    const zipFilePath = 'path/to/save/zip.zip';
    fs.writeFileSync(zipFilePath, zipContent);

    res.status(200).json({ message: 'Zip file saved successfully' });
  } catch (error) {
    console.error('Error saving zip file:', error);
    res.status(500).json({ message: 'Failed to save zip file' });
  } finally {
    // Cleanup the uploaded files
    req.files.forEach((file: Express.Multer.File) => {
      fs.unlinkSync(file.path);
    });
  }
});

import { NextApiRequest, NextApiResponse } from 'next';
import multer from 'multer';
import JSZip from 'jszip';
import fs from 'fs';

const upload = multer({ dest: 'uploads/' });

// Disable built-in body parsing
export const config = {
  api: { bodyParser: false },
};

export default upload.array('images', 5, async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const zip = new JSZip();

    req.files.forEach((file: Express.Multer.File) => {
      const data = fs.readFileSync(file.path);
      zip.file(file.originalname, data);
    });

    const zipContent = await zip.generateAsync({ type: 'nodebuffer' });

    // Save the zip file
    const zipFilePath = 'path/to/save/zip.zip';
    fs.writeFileSync(zipFilePath, zipContent);

    res.status(200).json({ message: 'Zip file saved successfully' });
  } catch (error) {
    console.error('Error saving zip file:', error);
    res.status(500).json({ message: 'Failed to save zip file' });
  } finally {
    // Cleanup the uploaded files
    req.files.forEach((file: Express.Multer.File) => {
      fs.unlinkSync(file.path);
    });
  }
});

Sunless•6/10/23, 7:12 PM

here

Sunless•6/10/23, 7:12 PM

an example of using multer to handle files

Sunless•6/10/23, 7:13 PM

I used this once before so I remember it works cleanly with files.

mind you the snippet above is from ChatGPT so use at your own discretion

SSunless *proompting some code into existance here

elpupperOP•6/10/23, 7:13 PM

are u using chatgpt lol

Eelpupper are u using chatgpt lol

Sunless•6/10/23, 7:14 PM

haha just did as an example, I don't have a code snippet for multer