Next.js Discord

Discord Forum

Has anyone tried to validate a File list (from an <input type="file" multiple/>) with Zod?

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
const fileSchema = z.instanceof(File, { message: "Required " });
const imageSchema = fileSchema.refine(
  (file) => file.size === 0 || file.type.startsWith("image/")
);

const addSchema = z.object({
  name: z.string().min(1),
  description: z.string().min(1),
  priceInCents: z.coerce.number().int().min(1),
  file: fileSchema.refine((file) => file.size > 0, "Required"),
  image: imageSchema.refine((file) => file.size > 0, "Required"),
  //otherImages: otherImagesSchema,
});

export async function addProduct(prevState: unknown, formData: FormData) {
  console.log(formData);
  const parsed = Object.fromEntries(formData.entries());
  const result = addSchema.safeParse(parsed);

  if (result.success === false) {
    return result.error.formErrors.fieldErrors;
  }

I can validate "image" correctly, but I can't find a way to validate "otherImages", I get an error: Expected array, received object

if I print "formData" it prints:
FormData {
  name: 'Tesd',
  priceInCents: '5050',
  description: 'ASdasd',
  file: File {
    size: 225530,
    type: 'image/jpeg',
    name: '292991327_145305888162213_9204365069390082631_n.jpg',
    lastModified: 1719892404652
  },
  image: File {
    size: 35560,
    type: 'image/jpeg',
  otherImages: [
    File {
      size: 214145,
      type: 'image/jpeg',
      name: '288941145_141842641831805_786802961590001657_n.jpg',
      lastModified: 1719892404653
    },
    File {
      size: 222940,
      type: 'image/jpeg',
      name: '288999181_141842801831789_1528997326957215259_n.jpg',
      lastModified: 1719892404653
    }
  ]
}

if I print console.log("test: ", parsed.otherImages); I get
test:  File {
  size: 151057,
  type: 'image/jpeg',
  name: '292035378_145378834821585_1215988590876171854_n.jpg',
  lastModified: 1719895627652
}
instead of the array and I dont know why

2 Replies

@Brown bear const fileSchema = z.instanceof(File, { message: "Required " }); const imageSchema = fileSchema.refine( (file) => file.size === 0 || file.type.startsWith("image/") ); const addSchema = z.object({ name: z.string().min(1), description: z.string().min(1), priceInCents: z.coerce.number().int().min(1), file: fileSchema.refine((file) => file.size > 0, "Required"), image: imageSchema.refine((file) => file.size > 0, "Required"), //otherImages: otherImagesSchema, }); export async function addProduct(prevState: unknown, formData: FormData) { console.log(formData); const parsed = Object.fromEntries(formData.entries()); const result = addSchema.safeParse(parsed); if (result.success === false) { return result.error.formErrors.fieldErrors; } > I can validate "image" correctly, but I can't find a way to validate "otherImages", `I get an error: Expected array, received object` if I print "formData" it prints: FormData { name: 'Tesd', priceInCents: '5050', description: 'ASdasd', file: File { size: 225530, type: 'image/jpeg', name: '292991327_145305888162213_9204365069390082631_n.jpg', lastModified: 1719892404652 }, image: File { size: 35560, type: 'image/jpeg', otherImages: [ File { size: 214145, type: 'image/jpeg', name: '288941145_141842641831805_786802961590001657_n.jpg', lastModified: 1719892404653 }, File { size: 222940, type: 'image/jpeg', name: '288999181_141842801831789_1528997326957215259_n.jpg', lastModified: 1719892404653 } ] } if I print `console.log("test: ", parsed.otherImages);` I get test: File { size: 151057, type: 'image/jpeg', name: '292035378_145378834821585_1215988590876171854_n.jpg', lastModified: 1719895627652 } instead of the array and I dont know why
Use zod-form-data to validate FormData
How did you fix this?