Estoy usando el formulario de gancho de reacción para cargar un archivo, y mi campo de carga de archivos es:
<input className={`form-control ${ errors["cover_image"] ? "border-red-500" : "" }`} type="file" id="cover_image" {...register("cover_image")} onChange={handleChange} />y tengo yup validación como:
cover_image: Yup.mixed() .test("name", "Cover Image is required", (value) => { return value[0] && value[0].name !== ""; }) .test("fileSize", "File must be less than 2MB", (value) => { return value[0] && value[0].size <= 2000000; }) .test("type", "Only image are supported", (value) => { return value[0] && value[0].type.includes("image"); }), Funciona bien en el caso de crear una página, se muestra requerido, cuando no se carga, pero en el caso de la página de edición, se muestra un campo requerido, si no cargo ningún archivo. Hay un valor de archivo en item.cover_image .
También probé defaultValue={item.cover_image} , pero no me permite establecer el valor predeterminado en caso de edición. ¿Cómo sería la mejor manera de manejar esta situación?
En lugar de usar un paquete externo para validar, recomendaría usar la validación de react-hook-form
import { useForm } from 'react-hook-form' export default function App() { const { register, handleSubmit, formState } = useForm() console.log({ errors: formState.errors }) return ( <form onSubmit={handleSubmit(data => console.log(data))}> <input type="file" {...register('cover_image', { validate: value => { const isExists = !!value.length const isGoodSize = value[0] && value[0].size <= 2000000 const isImageType = value[0] && value[0].type.includes('image') if (!isExists) return "Cover Image is required" if (!isGoodSize) return 'File must be less than 2MB' if (!isImageType) return 'Only image are supported' return undefined } })} /> <input type="submit" /> </form> ) }