Cannot reset file input

[katywings]

IS

If you reset a file input by setting its value to "" and dispatching an input event, modular-forms keeps the previously selected file in the form state.

SHOULD

Resetting the file input value with the mentioned logic, should result in the value being cleared in the form state.

Extra information

The reason for this happening is in the following lines:

1. files[0] is undefined for an empty file input:

   modular-forms/packages/solid/src/utils/getElementInput.ts

   Line 47 in 9bdade5

   ? files[0]

2. since the value from getElementInput is undefined, this is gonna fallback to prevValue:

   modular-forms/packages/solid/src/utils/handleFieldEvent.ts

   Line 51 in 9bdade5

   inputValue ?? prevValue

Workaround

Add the following transform to your file fields.

export const toOptionalFile = (value: any, evt: FieldEvent) => {
  const input = evt.target as HTMLInputElement;
  if (!input.files?.length) return;
  return value
}

[fabian-hiller]

Have you tried using reset? I plan to rewrite this lib soon and fix such things.

[katywings]

Haven't tried it (I assume it indeed would work as well 😄). But the reset is triggered by a button inside my file input component separate from modular-forms, so I didnt have access to reset in there - not without giving up the clean separation 🙈.

[fabian-hiller]

Sorry for my late reply. Could you find a workaround?

[katywings]

The workaround mentioned in the description has been working out okay so far 😅.