微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

是的,React-Hook-Form 中的文件上传验证问题

如何解决是的,React-Hook-Form 中的文件上传验证问题

我尝试以反应钩子形式验证图像上传,是的。此验证适用于图像文件。但任何人尝试上传 .txt、.pdf、.docx、.csv、.xlsx 或其他文件,然后验证无法正常工作,也仍然显示以前的错误消息。这是我的代码 -

const SUPPORTED_FORMATS =['image/jpg','image/jpeg','image/png']
    const schema = yup.object().shape({
    bank_img: yup.mixed()
    .test("required","Bank image is a required field",(value) => {
        return !value || value.length > 0;
    })
    .test('type','Invalid image format,supported image format are .jpg,.jpeg and .png',(value) =>{
        return value === null || (value && SUPPORTED_FORMATS.includes(value[0]?.type))
    })
    });


const Add = () => {
    const { register,handleSubmit,formState:{ errors } } = useForm({
        resolver: yupResolver(schema)
    });
    const onSubmit = data =>{
    console.log(data);
    }
    return (
        <>
                <form onSubmit = {handleSubmit(onSubmit)}>
                            <div>
                            <input 
                                type="file" 
                                className="form-control-file" 
                                {...register('bank_img')}
                            />
                            <p className='text-danger'>{errors.bank_img?.message}</p>
                            </div>
                      
                
                        <button className="btn btn-primary" type='submit'>
                            Submit
                  </button>
                </form>
        </>
    )
}

export default Add

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?