React MuiFileInput validation for file upload displays error even after the file is selected-CodePudding

The

How to eliminate this error after file selection?

CodePudding user response：

Remove Value props of input and just simply use MUI TextField and Style it

<TextField label="Upload Image" name="uploadImage" sx={{ margin: 2 }} placeholder="Select a file" onChange={handleFile} type="file" {...register("uploadImage", { required: "Please select a file", })} error={Boolean(errors.uploadImage)} helperText={errors.uploadImage?.message} />

CodePudding user response：

add reset where you included useForm and reset file field before selecting new file, this will reset error before selecting new file, and show error only if you did not select new file.

.... export default function App() { const { register, handleSubmit, formState: { errors }, reset } = useForm(); .... const handleFile = (event) => { reset({ 'uploadFile': null }); setFile(event); };

this has a working example !