React Aria Components + React Hook Form

[thevipinmishra]

I'm having some issues with the FileTrigger component of the React Aria Components when I use it with register method. I'm unable to debug it as well.

Can someone please have a look and help?

Here's the FileTrigger API

Repro - https://codesandbox.io/p/sandbox/determined-flower-cgv6nh?welcome=true

[Moshyfawn]

You can't use the register method with FileTrigger directly as the input's onChange event doesn't return the native Web event with target (ref adobe/react-spectrum#4854).

You can try to override the onChange handler returned from register by passing an additional onChange prop with setValue and pass the FileList returned from FileTrigger onChange directly to the form values setter.

const { register, setValue } = useForm()

return (
  <FileTrigger {...register("file")}  onChange={file => setValue('file', file)}>
    ...
  </FileTrigger>
)

Otherwise, consider converting the input into a controlled input via the useController / Controller API.

[thevipinmishra]

You can't use the register method with FileTrigger directly as the input's onChange event doesn't return the native Web event with target (ref adobe/react-spectrum#4854).

You can try to override the onChange handler returned from register by passing an additional onChange prop with setValue and pass the FileList returned from FileTrigger onChange directly to the form values setter.

const { register, setValue } = useForm()

return (
  <FileTrigger {...register("file")}  onChange={file => setValue('file', file)}>
    ...
  </FileTrigger>
)

Otherwise, consider converting the input into a controlled input via the useController / Controller API.

Hi, thanks for this.

Can you please give me an example with Controller ?

[Moshyfawn]

Here's a very basic setup. The rest of it will depend on your specific use-case

<Controller
  control={control}
  name="file"
  render={({ field }) => (
    <FileTrigger
      {...field}
      onChange={(files) => {
        createPreview(files[0]); // INFO: this can be a file upload API call that returns an image preview or something like a `FileReader` Web API call that returns `base64`, for example
        field.onChange(files[0])
      }}
    >
      <Button>Select a file</Button>
    </FileTrigger>
  )}
/>

Here's a basic example createPreview implementation

const createPreview = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    setFilePreview(reader.result); // INFO: you can setup a React state to store the preview `string`
  }
  return filePreview
}

Here's a quick and dirty codesandbox example