FileTrigger and forms

[Callumk7]

Hi all,

I am not sure how to use the FileTrigger component within a form as a replacement for a , as it does not accept a 'name' in the same way that an input field does.

How should I use this component correctly, such that I can get the file from the request formData?

[reidbarber]

I think adding a name prop is the right way to handle this. Feel free to convert this discussion into an issue, or create a PR.

See #5486 (comment)

[yihuiliao]

So actually, we intentionally decided to move FileTrigger away from forms which you can see in this PR.. This might be confusing and I'm sure we can update our docs to help clarify this. One of the follow-ups was to create a separate file input component that works specifically for forms but this has not been implemented yet.

[Callumk7]

Ah, thanks for the quick reply, that is useful. I am a Remix user, which relies on forms quite a lot, so I will keep an eye out for the form-specific component.

As a side note; remix itself only has unstable support for file uploads (https://remix.run/docs/en/main/guides/file-uploads) and so I can't reasonably push this as a priority :)

[alecmev]

Could you elaborate a little on what exactly was the problem with name, please? I read the description in the linked PR and it doesn't sound like it was in the way of fixing the cancellation issue. If there is no known problem and it's purely for scope reduction, why not keep it around until there's a form-specific alternative? 😛

[busticated]

i just ran into this 😭

i'm using [email protected] and it really leans into the whole "uncontrolled" forms thing - that is, it wants you to make plain "dumb" forms which then submit to an "action" where you can do what you will with the data. the key requirement in this case is that every input needs to have a name attribute.

FileTrigger does not currently support setting a name prop (source: 1, 2) so it's effectively incompatible with react-router-dom atm.

[snowystinger]

Thanks for the additional example. The team is currently busy with a few large priority items, so we haven't had time to work on #5486 (comment)
However, we do accept contributions if you or anyone else would like to implement it.

[alecmev]

For future readers, you can get started with this in the meanwhile:

// FileField.tsx

import { useFormValidation } from '@react-aria/form';
import { useFormValidationState } from '@react-stately/form';
import { type PropsWithChildren, useMemo, useRef } from 'react';
import { FieldErrorContext, InputContext } from 'react-aria-components';

export const FileField = ({
  children,
  name,
  isRequired,
  accept,
  multiple,
}: PropsWithChildren<{
  name?: string | undefined;
  isRequired?: boolean | undefined;
  accept?: string | undefined;
  multiple?: boolean | undefined;
}>): JSX.Element => {
  const inputRef = useRef<HTMLInputElement>(null);

  const formValidationState = useFormValidationState({
    value: undefined,
    validationBehavior: 'native',
  });

  useFormValidation(
    { validationBehavior: 'native' },
    formValidationState,
    inputRef,
  );

  const inputProps = useMemo(
    () => ({
      name,
      required: isRequired,
      accept,
      multiple,      
      ref: inputRef,
      'aria-invalid': formValidationState.displayValidation.isInvalid,
    }),
    [name, isRequired, accept, multiple, formValidationState],
  );

  return (
    <div
      data-required={!!isRequired || undefined}
      data-invalid={
        formValidationState.displayValidation.isInvalid || undefined
      }
    >
      <InputContext.Provider value={inputProps}>
        <FieldErrorContext.Provider
          value={formValidationState.displayValidation}
        >
          {children}
        </FieldErrorContext.Provider>
      </InputContext.Provider>
    </div>
  );
};

// FileInput.tsx

import { type ChangeEvent, useCallback, useRef, useState } from 'react';
import { Button, Input } from 'react-aria-components';

export const FileInput = (): JSX.Element => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [files, setFiles] = useState<File[]>();

  const onPress = useCallback(() => {
    if (!inputRef.current) return;
    if (inputRef.current.value !== '') inputRef.current.value = '';
    inputRef.current.click();
  }, []);

  const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setFiles(event.target.files ? [...event.target.files] : undefined);
  }, []);

  return (
    <div>
      <Button onPress={onPress}>Browse...</Button>
      <div>{files?.map((x) => <div key={x.name}>{x.name}</div>)}</div>
      <Input
        style={{ display: 'none' }}
        type="file"
        ref={inputRef}
        onChange={onChange}
      />
    </div>
  );
};

Use the same way you would use TextField and Input.