Consider having support for custom file upload inputs within react aria.

[jbovenschen]

First of all thanks for open sourcing @react-aria/* and @react-stately/*.

It would be nice to have a hook within react-aria which can be used to create an accessible but customisable file upload.
I'm willing to implement it myself, I believe the first step would be to draft an RFC?

Before I get started with it, are you willing to accept a PR for it? And do you have already some thoughts how the API would look like?

[devongovett]

This sounds like a good feature. I guess it would be a hidden <input type="file"> element?

We don't have any API specs yet, so if you'd like to propose something to get us started, that would be great!

[jbovenschen]

Thanks for the response, this is my first draft how the API could look like.

Indeed we need to have a HiddenInput element which contains the default browser behaviour for an upload element.

For the other parts the API could be nearly the same as a NumberField or TextField.

UploadField should use a File as its value. When the multiple prop is set it should use an array of File's for its value, and emits either a File or an array of File's to its onChange event handler.

interface UploadFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, LabelableProps {
  /** Current file value (controlled) */
  value?: File | File[],
  /** Default file value (uncontrolled) */
  defaultValue?: File | File[],
  /** Handler that is called when the file changes. */
  onChange?: (file: File | File[]),
  /** Indicates if the user may choose multiple files */
  multiple?: Boolean,
}

interface AriaUploadFieldProps extends UploadFieldProps, AriaLabelingProps, FocusableDOMProps, FileInputDOMProps, AriaValidationProps {}

For the main interface we should expose both a useUpload hook and HiddenUpload component. the inputProps object returned by the useUpload should be spread as the properties on the HiddenUpload component. The triggerProps will provide the correct accessibility to trigger the OS native file dialogs.

interface UploadFieldAria {
  inputProps: InputHTMLAttributes<HTMLInputElement>,
  triggerProps: AriaButtonProps,
  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
}

declare function useUploadField(props: AriaUploadFieldOptions, ref: RefObject<HTMLInputElement />): UploadFieldAria

[snowystinger]

First off, thank you for starting this. Totally awesome.
Would you mind showing what you think the minimal dom might look like as well so we know what's getting applied where?
Thanks!

[jbovenschen]

The minimal dom structure would look like this:

function Upload(props) {
  let { label } = props;
  let ref = React.useRef();
   
  let { inputProps, triggerProps, labelProps } = useUploadField(props, ref); 

  return (
    <div>
      <label {...labelProps}>{label}</label>
      <HiddenUpload {...inputProps} triggerRef={ref} />
      <button {...triggerProps} ref={ref}>Custom styling</button>
    </div>
  );
}

I based this API interface based on the @react-aria/select and @react-aria/textfield examples.

[snowystinger]

Sorry for not being clearer, I meant the rendered dom
I think typically there is a visible labeled readonly textfield as well
Here's a starting point with some places to fill in and probably a bunch of other things I missed

<div class="spectrum-FileInput">
  <label for="?">File Upload</div>
  <button aria-controls="hidden-input">Select</button>
  <div class="visually-hidden">
    <input type="file" id="hidden-input" aria-labelledby="?" />
  </div>
  <input type="text" readonly id="file-field" aria-labelledby="?" />
</div>

[jbovenschen]

Sorry for not responding for a while, thanks for the input. I think I need to re-evaluate some parts that I had initially in mind for the API.

Will try to respond with an improved proposal as soon as I got some time to work on it (hopefully this week).

[Jordan-Hall]

@jbovenschen Have you managed to take a look at a good solution?