Dealing with custom/arbitrary inputs

[mary-ext]

Is there any examples of how Modular Forms can deal with arbitrary inputs? I have a custom component that doesn't rely on <input> and instead relying on a different form of interaction, which <Field> doesn't seem to be designed for.

As a visualization, here's said component, these are avatar and banner fields accepting a type of Blob | string | undefined. If there was no image set, it would immediately open a file picker, attempt to compress the image, and sets a Blob in the field state. If there was then it would either ask to remove or to replace the image.

There's no field validations here as the compression process tries to take care of that, however, it would be nice if I can put it into one form state as the rest of the fields. Is there any possibility for a <CustomField> component where it's not reliant on the element being <input> <select> or <textarea>?

interface CustomFieldElementProps<
  TFieldValues extends FieldValues,
  TFieldName extends FieldPath<TFieldValues>
> {
  get value(): Maybe<FieldPathValue<TFieldValues, TFieldName>>;
  onChange: (value: Maybe<FieldPathValue<TFieldValues, TFieldName>>) => void;
  onBlur: () => void;
}

Though we could probably combine FieldStore and CustomFieldElementProps here as the idea is that you ideally shouldn't be spreading the props as is, since these are totally custom inputs.

[fabian-hiller]

I would recommend using the Field component to get access to the state of your field and then you can add the value to the form using the setValue method. Let me know if that works for your.

[mary-ext]

Hmmm, I'm not able to work around the fact that my component takes in a Blob instead of a File, as there are client-side image compression involved.

I have some thoughts about changing it to an object containing relevant states here, so it's not guaranteed to continue being a Blob either.

[fabian-hiller]

A workaround for now would be to cast it to a File. You will not be able to assign an object to a single field, as Modular Forms only supports values that the HTML form fields support. I plan to revise Modular Forms in January. I can try to take your feedback into account.