reactjs - Validácia Zod zlyhala: chyba 'Očakávané pole, prijatý objekt' pri nahrávaní viacerých obrázkov

zod schéma

const createTourSchema = object({ 
images:array(string())
})

udalosť onChange

const [tourImages, setTourImages] = useState<File[]>([]);
const handleImagesChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files) {
      const fileList = Object.values(files);
      setTourImages(fileList);
    }
  }

  const onSubmitHandler: SubmitHandler<ICreateTourInput> = async (
    values: any
  ) => {
      const uploadedImageUrls = [];
      for (const image of tourImages) {
        const imageFormData = new FormData();
        imageFormData.append('file', image);
        imageFormData.append(
          'upload_preset',
          import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET
        );
        const imageUploadRes = await uploadImage(imageFormData);
        const imageUrl = (imageUploadRes as any)?.data?.secure_url;
        if (imageUrl) {
          uploadedImageUrls.push(imageUrl);
        }
      }
      console.log(uploadedImageUrls);

      await createTour({
        ...values,
        imageCover: imageCoverUrl,
        images: uploadedImageUrls,
      });
}

createTour a uploadImage sú rtk mutácie.

<FormInput
 name="images"
 labelText="Tour Images"
 type="file"
 multiple={true}
 onChange={handleImagesChange}
/>

Som tiež react-hook-form.

Chcem získať obrázky z vstupu a potom ich nahrať na Cloudinary. Získať URL adresy nahratých obrázkov v poli a odoslať ich na server spolu s ďalšími údajmi potrebnými na vytvorenie zájazdu.

Súvisiace články