yolo Comments - Answer Overflow

yolo

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

•Created by yolo on 4/18/2024 in #questions

zod validation with uploadthing and server actions

as i said if i pass onUpload={uploadFiles} to direct upload on uploadthing after i upload files i can't validate this .min(2) because after upload my files array is empty

7 replies

TTCTheo's Typesafe Cult

•Created by yolo on 4/18/2024 in #questions

zod validation with uploadthing and server actions

7 replies

TTCTheo's Typesafe Cult

•Created by yolo on 4/18/2024 in #questions

zod validation with uploadthing and server actions

and there is my action

export const location = async (values: z.infer<typeof Schema>) => {
  const user = await currentUser();

  if (!user) {
    return { error: "Unauthorized" };
  }

  const userId = user?.id;
  if (!userId) return false;

  const dbUser = await getUserById(userId);

  if (!dbUser) {
    return { error: "Unauthorized" };
  }

  const validateInputs = AddLocationFormSchema.safeParse(values);

  console.log(validateInputs);

  if (!validateInputs.success) {
    return { error: "Invalid fields!" };
  }

  const { files, ...rest } = values;

  console.log(rest);

  await db.locations.create({
    data: {
      ...rest,
      user: { connect: { id: userId } },
    },
  });

  return { success: "Settings Updated!" };
};

export const location = async (values: z.infer<typeof Schema>) => {
  const user = await currentUser();

  if (!user) {
    return { error: "Unauthorized" };
  }

  const userId = user?.id;
  if (!userId) return false;

  const dbUser = await getUserById(userId);

  if (!dbUser) {
    return { error: "Unauthorized" };
  }

  const validateInputs = AddLocationFormSchema.safeParse(values);

  console.log(validateInputs);

  if (!validateInputs.success) {
    return { error: "Invalid fields!" };
  }

  const { files, ...rest } = values;

  console.log(rest);

  await db.locations.create({
    data: {
      ...rest,
      user: { connect: { id: userId } },
    },
  });

  return { success: "Settings Updated!" };
};

but on submit i get this error

7 replies

TTCTheo's Typesafe Cult

•Created by yolo on 4/18/2024 in #questions

zod validation with uploadthing and server actions

i fixed it by adding onUpload directly after uploading images, but i tried to validate it with minimum 2 images and run action when submiting form before submitHandler function from react form state like this

const fileValidation = z.object({
  files: z.array(z.instanceof(File)),
  /* .min(2, "You have to select at least two images."), */
});

export const Schema = AddLocationFormSchema.merge(fileValidation);

type Inputs = z.infer<typeof Schema>;

 const form = useForm<Inputs>({
    resolver: zodResolver(Schema),
    mode: "onChange",
    defaultValues: {
      name: "",
    ...
files:[]
images:[] //i will push URLs of images there after upload 
    },
  });

const submitFormHandler = async (values: z.infer<typeof Schema>) => {
    await uploadFiles(values.files);

    setTransition(() => {
      location(values).then((data) => {
        if (data && data.error) {
          toast.error("Something went wrong!");
        }
        if (data && data.success) {
          form.reset();
          setSuccess(true);
        }
      });
    });
  };

useEffect(() => {
    console.log("test", uploadedFilesUrl);

    form.setValue("images", uploadedFilesUrl);
  }, [uploadedFilesUrl]);   //uploadedFilesUrl is from custom hook URLS of images

const fileValidation = z.object({
  files: z.array(z.instanceof(File)),
  /* .min(2, "You have to select at least two images."), */
});

export const Schema = AddLocationFormSchema.merge(fileValidation);

type Inputs = z.infer<typeof Schema>;

 const form = useForm<Inputs>({
    resolver: zodResolver(Schema),
    mode: "onChange",
    defaultValues: {
      name: "",
    ...
files:[]
images:[] //i will push URLs of images there after upload 
    },
  });

const submitFormHandler = async (values: z.infer<typeof Schema>) => {
    await uploadFiles(values.files);

    setTransition(() => {
      location(values).then((data) => {
        if (data && data.error) {
          toast.error("Something went wrong!");
        }
        if (data && data.success) {
          form.reset();
          setSuccess(true);
        }
      });
    });
  };

useEffect(() => {
    console.log("test", uploadedFilesUrl);

    form.setValue("images", uploadedFilesUrl);
  }, [uploadedFilesUrl]);   //uploadedFilesUrl is from custom hook URLS of images

7 replies

Gaming

Programming