i have issue when i change mui-file-input, useFormPersist save the
value in storage with array of empty objects and when i reload the
page, i got error because the value not true and the input expected
value be [] or array of objects and has file data, i tried also to prevent
useFormPersist from saving the file input value in storage, it’s not worked also
because this file inside array also
`import { SetFieldValue } from ‘react-hook-form’;
import { MuiFileInput } from ‘mui-file-input’;
interface FormPersistConfig {
storage?: Storage;
watch: (names?: string | string[]) => any;
setValue: SetFieldValue<any>;
exclude?: string[];
onDataRestored?: (data: any) => void;
validate?: boolean;
dirty?: boolean;
onTimeout?: () => void;
timeout?: number;
}
declare const useFormPersist: (name: string, { storage, watch, setValue, exclude,
onDataRestored, validate, dirty, onTimeout, timeout }: FormPersistConfig) => {
clear: () => void;
};
export { FormPersistConfig, useFormPersist as default };
const BookingVisa = () => {
const {
unregister,
register,
control,
handleSubmit,
watch,
setValue,
clearErrors,
setError,
getValues,
reset,
formState: { errors },
} = useForm<BookingInfo>({
resolver: yupResolver(bookingInfoSchema),
mode: 'all',
})
const [excludeFields, setExcludeFields] = useState<string[]>([]);
const passengers = watch('passengers') || [];
useEffect(() => {
const newExcludeFields = passengers.flatMap((passenger, index) => {
return [`passengers[${index}].file`, `passengers[${index}].document`];
});
setExcludeFields(newExcludeFields);
}, [passengers]);
useFormPersist(`bookVisa-${searchId}`, {
watch,
setValue,
exclude: [ ...excludeFields] ,
})
const handleFilesChange = async(files: any, index: number, name: any, field:
any, inputNum: any) => {
if(files.length > 3){
return showMessage(trans(`visa.file${index}.error.length`), 'error')
}
field?.onChange(files);
const form = new FormData()
for (let i = 0; i < files.length; i++) {
const reader = new FileReader();
form.append(`files[${i}]`, files[i]);
reader.readAsDataURL(files[i]);
}
const data = await dispatch(SettingService().uploadImage(form))
if (data.payload.urls) {
setValue(`passengers[${index}].${name + 's'}`, data.payload.urls);
// showMessage(trans(`visa.file${inputNum}.media.success`), 'success')
if(name === 'file'){
clearErrors(`passengers[${index}].file`);
}
}else{
setValue(`passengers[${index}].${name + 's'}`, []);
setValue(`passengers[${index}].${name}`, []);
showMessage(trans(`visa.file${inputNum}.media.error`), 'error')
if(name === 'file'){
setError(`passengers[${index}].file`, { type: "manual", message:
trans(`visa.file${inputNum}.error`) })
}
field?.onChange([]);
}
};
return (
<from id="fromId" method={'post'} onSubmit={handleSubmit(onSubmit)}>
<Controller
name={`passengers[${index}].file`}
control={control}
// defaultValue={[]}
render={({ field }: any) => {
return(
<MuiFileInput
label={trans('File Upload 122')}
{...field}
multiple
sx={{ width: '100%' }}
inputProps={{ accept: 'image/*,.pdf', maxFiles: 3 }}
onChange={(values: any) => {
handleFilesChange(values, index, 'file', field, 1);
}}
value={field.value}
clearIconButtonProps={{ children: <CloseIcon fontSize="small" /> }}
error={!!errors.passengers?.length ?
!!errors.passengers[index]?.file : false}
helperText={(errors.passengers?.length &&
errors.passengers[index]?.file) ?
trans(errors.passengers[index]?.file.message) :
trans('visa.file1.helpertext')}
/>
)}}
/>
</form>
)}
`