React Hook Form doesn't clear the file upload field properly

[davdet]

I'm using React Hook Form v7.24.2 in a project with a form where I have to upload a file. Here's the snippet of the input field:

<div className='mb-3'>
   <label className='form-label' htmlFor='xmlFile'>
     XML File
   </label>
   <input
     type='file'
     className='form-control'
     id='xmlFile'
     name='xmlFile'
     {...register('xmlFile')}
   />
   {watch().xmlFile ? <Button onClick={() => handleFieldReset('xmlFile')}>Empty</Button> : ''}
   {errors.xmlFile && <p>{errors.xmlFile.message}</p>}
</div>

I'm using the watch API so that I can keep track of the value in order to conditionally render the button for clearing the input. Here's the handleFieldReset function tied to the onClick:

const handleFieldReset = (field) => {
    resetField(field)
}

The problem is that when I clear the input, it clears the value but it doesn't clear the file name from the input field rendered on screen:

I've also tried to replace the resetField function with setValue(nameOfTheField, '') without any luck. Tried to look online for a solution but didn't find anything relatable.

---

EDIT:
I've found a workaround by modifying the handleFieldReset function as it follows, but it doesn't seem ideal:

const handleFieldReset = (field) => {
    resetField(field)
    document.getElementById(field).value = ''
}

[bluebill1049]

track issue here: #7652

[Moshyfawn]

Looks like an issue as the reset form method works as expected. See #7652.
Meanwhile you can try using the [the reset form method](https://react-hook-form.com/api/useform/reset method

const { reset, getValues } = useForm()
reset({ ...getValues(), xmlFile: null })

Take a look at the Props section of RHF docs on reset to see what additional options you want to provide to keep you form state

[davdet]

Looks like an issue as the reset form method works as expected. See #7652. Meanwhile you can try using the [the reset form method](https://react-hook-form.com/api/useform/reset method

const { reset, getValues } = useForm()
reset({ ...getValues(), xmlFile: null })

Take a look at the Props section of RHF docs on reset to see what additional options you want to provide to keep you form state

Already tried, doesn't work.

[bluebill1049]

patched. will release in the next patch version.

[DanB-dev]

can confirm updating to latest patch fixed this issue for me.

[danielmarcano]

I am having a similar issue with a controlled "field" that receives a value of type File.

In my case, we have a multi-step form. The parent component holds the form state, and it passes it down to each step child components through props, which are then passed to the defaultValues of each step's form.

Using null for emptying the field works, but it's not desired as we are using Yup to create the form's validation, and this forces our types and our Yup schema to accept null as a valid value (since our field is optional), so that the formState's isValid property returns true even though the field (avatar, in our case) has been set as null.

Here's an example:

export type UserInformationStepForm = {
  firstName: string;
  lastName: string;
  timeZone: string;
  avatar?: File | null;
};

export function useHandleForm({
  selectedAvatar,
  selectedFirstName,
  selectedLastName,
  selectedTimeZone,
  onGoToNextStep,
}: HandleFormProps) {
  const formSchema: Yup.Schema<UserInformationStepForm> = Yup.object().shape({
    avatar: Yup.mixed<File>().nullable(),
    firstName: Yup.string().required(),
    lastName: Yup.string().required(),
    timeZone: Yup.string().required(),
  });

  const defaultValues = useMemo(
    () => ({
      avatar: selectedAvatar ?? null, // This one is needed due to react-hook-form... since undefined does not work
      firstName: selectedFirstName,
      lastName: selectedLastName,
      timeZone: selectedTimeZone,
    }),
    [selectedAvatar, selectedFirstName, selectedLastName, selectedTimeZone],
  );

  const {
    control,
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isValid },
  } = useForm<UserInformationStepForm>({
    mode: 'all',
    resolver: yupResolver(formSchema),
    defaultValues,
  });

  useEffect(() => {
    reset(defaultValues);
  }, [reset, defaultValues]);

  const onSubmit = handleSubmit(() => {
    onGoToNextStep?.();
  });

  return {
    control,
    errors,
    register,
    disabledSubmit: isSubmitting || !isValid || !onGoToNextStep,
    onSubmit,
  };
}

And this is our controlled avatar field (ProfilePictureUploader simply has an input type="file" within itself):

<Controller
  control={control}
  name="avatar"
  render={({ field: { value, onChange } }) => {
    return (
      <ProfilePictureUploader
        image={value}
          onChangeImageFile={(newValue) => {
          onChange(newValue);

          // onChangeForm updates the form state from outside, and the component gets re-rendered with the newly updated props
          // so these props are then passed to my useHandleForm custom hook's memoized defaultValues object,
          // triggering the useEffect, and updating the form's defaultValues
          onChangeForm({ avatar: newValue });
        }}
      />
    );
  }}
/>

Any ideas as to how we could get rid of this null value? Sending undefined has not worked for us, since the form's state gets updated, but the controlled avatar field's value remains unchanged, still holding the file...

Also, sending an empty string would force us to modify Yup's schema and our types as well, which is still not desired.

It seems like React Hook Form is not updating the default value of a field when its initial value is of type File, and its "new"/upcoming value is undefined. When this happens, it just keeps/shows the previous File in the controlled field, even though the form's state gets updated to undefined.

[ghost]

having the same problem right now.
files don't reset with "reset" function.

[danielmarcano]

Hi @Stepkoff, according to this feature request I opened right after posting this comment, we simply need to pass null instead of undefined to our File fields in order to reset them, due to a limitation on React Hook Form. "Solving" this one, so that undefined values could work for resetting any defaultValues would require removing complete support from inline defaultValues / defaultChecked from all the custom hooks of the library...

[rendivs925]

location.reload() works fine to me :)