T
TanStack•2y ago
afraid-scarlet

File still adds even if yup validation fails

                    validators={{
                        onChange: yup
                            .mixed()
                            .required("A photo ID selfie is required")
                            .test("emptyFile", "A photo ID selfie is required", (value: AnyPresentValue & {}) => {
                                return value.value !== undefined && value.value !== null && value.value !== "";
                            })
                            .test("fileSize", "The file is too large", (value: AnyPresentValue & {}) => {
                                return value.value && value.value.size <= 1024 * 1024;
                            })
                            .test("fileType", "Document format is invalid (JPG or PNG)", (value: AnyPresentValue & {}) => {
                                return value.value && ["image/jpeg", "image/jpg", "image/png"].includes(value.value.type);
                            }),
                    }}
                />
                    validators={{
                        onChange: yup
                            .mixed()
                            .required("A photo ID selfie is required")
                            .test("emptyFile", "A photo ID selfie is required", (value: AnyPresentValue & {}) => {
                                return value.value !== undefined && value.value !== null && value.value !== "";
                            })
                            .test("fileSize", "The file is too large", (value: AnyPresentValue & {}) => {
                                return value.value && value.value.size <= 1024 * 1024;
                            })
                            .test("fileType", "Document format is invalid (JPG or PNG)", (value: AnyPresentValue & {}) => {
                                return value.value && ["image/jpeg", "image/jpg", "image/png"].includes(value.value.type);
                            }),
                    }}
                />
I'd like to block adding the file if Yup validation fails. In this case, field.state.value still gets set even if the size is too large. Using v0.13.0 for React-Form and Form-Core.
No description
No description
3 Replies
conscious-sapphire
conscious-sapphire•2y ago
Huh... I don't know why that would be failing. Are you sure that Yup is failing explicitly? If ya are, let's open a GH issue with a minimal repro and we'll investigate 🙂
afraid-scarlet
afraid-scarletOP•2y ago
Thanks, I will try to repro on a minimal environment and see. As a manual fix I was able to solve it by running .validateSync on the event in the handler, and if it fails validation, it will return out of adding the file to the event and simply return the validation message instead. Otherwise, if it passes validation, it will add the file properly.
conscious-sapphire
conscious-sapphire•2y ago
Oh! Did you add the ZodValidator adapter?

Did you find this page helpful?