Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.4

FileButton

FileButtonは、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。

ソース@yamada-ui/file-button

インポート

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

使い方

編集可能な例

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

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

または、childrenを使用してカスタマイズすることも可能です。childrenは、onClick, disabled, readOnly, invalidを提供します。

編集可能な例

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

バリアントを変更する

編集可能な例

<Wrap gap="md">
  <For
    each={[
      {
        colorScheme: "primary",
        variant: "solid",
      },
      {
        colorScheme: "secondary",
        variant: "outline",
      },
      {
        colorScheme: "warning",
        variant: "ghost",
      },
      {
        colorScheme: "danger",
        variant: "link",
      },
      {
        variant: "unstyled",
      },
    ]}
  >
    {({ colorScheme, variant }, index) => (
      <FileButton key={index} colorScheme={colorScheme} variant={variant}>
        {toTitleCase(variant)}
      </FileButton>
    )}
  </For>
</Wrap>
Copied!

サイズを変更する

編集可能な例

<Wrap gap="md">
  <For
    each={[
      {
        colorScheme: "primary",
        size: "xs",
        name: "X Small",
      },
      {
        colorScheme: "secondary",
        size: "sm",
        name: "Small",
      },
      {
        colorScheme: "warning",
        size: "md",
        name: "Medium",
      },
      {
        colorScheme: "danger",
        size: "lg",
        name: "Large",
      },
    ]}
  >
    {({ colorScheme, size, name }, index) => (
      <FileButton key={index} colorScheme={colorScheme} size={size}>
        {name}
      </FileButton>
    )}
  </For>
</Wrap>
Copied!

カラースキームを変更する

編集可能な例

<Wrap gap="md">
  <For each={["secondary", "green"]}>
    {(colorScheme, index) => (
      <FileButton key={index} colorScheme={colorScheme}>
        {toTitleCase(colorScheme)}
      </FileButton>
    )}
  </For>
</Wrap>
Copied!

複数選択を許容する

複数選択を許容する場合は、multipleをtrueに設定します。

編集可能な例

<FileButton multiple>Upload</FileButton>
Copied!

拡張子を指定する

拡張子を指定する場合は、acceptに文字列(タイプ, タイプ)を設定します。

編集可能な例

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

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、errorBorderColorにカラーを設定します。

編集可能な例

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

無効化する

無効化する場合は、disabledをtrueに設定します。

編集可能な例

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

  <FileButton as={IconButton} icon={<PlusIcon />} disabled />

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

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

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

編集可能な例

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

  <FileButton as={IconButton} icon={<PlusIcon />} readOnly />

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

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

無効な入力にする

無効な入力にする場合は、invalidをtrueに設定します。

編集可能な例

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

  <FileButton as={IconButton} icon={<PlusIcon />} invalid />

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

リセットする

値をリセットする場合は、resetRefにrefを設定します。設定されたrefにコールバック関数が付与されるので、それを実行します。

編集可能な例

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!

React Hook Formを使う

編集可能な例

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
      invalid={!!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!

GitHubでこのページを編集する

前FileInput次Dropzone