Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.0

FileButton

FileButton is a button component used for users to select files.

Source@yamada-ui/file-button

Import

import { FileButton } from "@yamada-ui/react"
Copied!

Usage

Editable example

<VStack alignItems="flex-start">
  <FileButton>Upload</FileButton>

  <FileButton as={IconButton} icon={<Plus />} />
</VStack>
Copied!

You can also customize it using children. children provides onClick, isDisabled, isReadOnly, isInvalid.

Editable example

<FileButton>
  {({ onClick }) => <Link onClick={onClick}>Upload</Link>}
</FileButton>
Copied!

Change Variant

Editable example

<Wrap gap="md">
  <FileButton colorScheme="primary" variant="solid">
    Solid
  </FileButton>

  <FileButton colorScheme="secondary" variant="outline">
    Outline
  </FileButton>

  <FileButton colorScheme="warning" variant="ghost">
    Ghost
  </FileButton>

  <FileButton colorScheme="danger" variant="link">
    Link
  </FileButton>

  <FileButton variant="unstyled">Unstyle</FileButton>
</Wrap>
Copied!

Change Size

Editable example

<Wrap gap="md">
  <FileButton colorScheme="primary" size="xs">
    X Small
  </FileButton>

  <FileButton colorScheme="secondary" size="sm">
    Small
  </FileButton>

  <FileButton colorScheme="warning" size="md">
    Medium
  </FileButton>

  <FileButton colorScheme="danger" size="lg">
    Large
  </FileButton>
</Wrap>
Copied!

Change Color Scheme

Editable example

<Wrap gap="md">
  <FileButton colorScheme="secondary">Secondary</FileButton>
  <FileButton colorScheme="green">Green</FileButton>
</Wrap>
Copied!

Allow Multiple Selection

To allow multiple selection, set multiple to true.

Editable example

<FileButton multiple>Upload</FileButton>
Copied!

Specify File Extensions

To specify file extensions, set accept to a string (type, type).

Editable example

<FileButton accept="image/png,image/jpeg">Upload</FileButton>
Copied!

Change Border Color

To change the border color, set errorBorderColor to a color.

Editable example

<FileButton isInvalid errorBorderColor="orange.500">
  Upload
</FileButton>
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack alignItems="flex-start">
  <FileButton isDisabled>Upload</FileButton>

  <FileButton as={IconButton} icon={<Plus />} isDisabled />

  <FileButton isDisabled>
    {({ onClick, isDisabled }) => (
      <Link
        onClick={onClick}
        opacity={isDisabled ? 0.4 : 1}
        cursor={isDisabled ? "not-allowed" : "pointer"}
        _hover={isDisabled ? undefined : { textDecoration: "underline" }}
      >
        Upload
      </Link>
    )}
  </FileButton>

  <FormControl
    isDisabled
    label="Upload file"
    helperMessage="Please select a file to upload."
  >
    <FileButton>Upload</FileButton>
  </FormControl>
</VStack>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack alignItems="flex-start">
  <FileButton isReadOnly>Upload</FileButton>

  <FileButton as={IconButton} icon={<Plus />} isReadOnly />

  <FileButton isReadOnly>
    {({ onClick, isReadOnly }) => (
      <Link
        onClick={onClick}
        cursor={isReadOnly ? "default" : "pointer"}
        _hover={isReadOnly ? undefined : { textDecoration: "underline" }}
      >
        Upload
      </Link>
    )}
  </FileButton>

  <FormControl
    isReadOnly
    label="Upload file"
    helperMessage="Please select a file to upload."
  >
    <FileButton>Upload</FileButton>
  </FormControl>
</VStack>
Copied!

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

<VStack alignItems="flex-start">
  <FileButton isInvalid>Upload</FileButton>

  <FileButton as={IconButton} icon={<Plus />} isInvalid />

  <FormControl isInvalid label="Upload file" errorMessage="File is required.">
    <FileButton>Upload</FileButton>
  </FormControl>
</VStack>
Copied!

Reset

To reset the value, set resetRef to ref. A callback function will be attached to the set ref, execute it.

Editable example

const [files, onChange] = useState<File[] | null>(null)
const resetRef = useRef<() => void>(null)

const onReset = () => {
  onChange(null)

  if (resetRef.current) resetRef.current()
}

return (
  <VStack>
    <Text>files: {files ? files.length : 0}</Text>

    <HStack>
      <FileButton resetRef={resetRef} onChange={onChange}>
        Upload
      </FileButton>

      <Button onClick={onReset}>Reset</Button>
    </HStack>
  </VStack>
)
Copied!

Use React Hook Form

Editable example

type Data = { fileButton: File[] | null }

const resetRef = useRef<() => void>(null)
const {
  control,
  handleSubmit,
  watch,
  setValue,
  formState: { errors },
} = useForm<Data>()

const onReset = () => {
  setValue("fileButton", null)

  if (resetRef.current) resetRef.current()
}

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.fileButton}
      label="Files"
      errorMessage={errors.fileButton ? errors.fileButton.message : undefined}
    >
      <Controller
        name="fileButton"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field: { ref, name, onChange, onBlur } }) => (
          <HStack>
            <FileButton
              {...{ ref, name, onChange, onBlur }}
              resetRef={resetRef}
            >
              Upload
            </FileButton>

            <Button onClick={onReset}>Reset</Button>
          </HStack>
        )}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousFieldsetNextFileInput