Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

FileInput

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

ソース@yamada-ui/file-input

インポート

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

使い方

編集可能な例

<FileInput placeholder="basic" />
Copied!

または、childrenを使用してカスタマイズすることも可能です。childrenは、Fileを配列で提供します。

編集可能な例

<FileInput placeholder="multiple" multiple>
  {(files) => <Text>Selected: {files ? files.length : 0}</Text>}
</FileInput>
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <For each={["outline", "filled", "flushed", "unstyled"]}>
    {(variant, index) => (
      <FileInput key={index} variant={variant} placeholder={variant} />
    )}
  </For>
</VStack>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <For
    each={[
      {
        placeholder: "extra small",
        size: "xs",
      },
      {
        placeholder: "small",
        size: "sm",
      },
      {
        placeholder: "medium",
        size: "md",
      },
      {
        placeholder: "medium",
        size: "lg",
      },
    ]}
  >
    {({ placeholder, size }, index) => (
      <FileInput key={index} placeholder={`${placeholder} size`} size={size} />
    )}
  </For>
</VStack>
Copied!

複数選択を許容する

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

編集可能な例

<FileInput placeholder="multiple" multiple />
Copied!

拡張子を指定する

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

編集可能な例

<FileInput placeholder="only png, jpeg" accept="image/png,image/jpeg" />
Copied!

区切りをカスタマイズする

区切りをカスタマイズする場合は、separatorに文字列を設定します。

編集可能な例

<FileInput placeholder="multiple" multiple separator=";" />
Copied!

カスタムコンポーネントを使用する

カスタムコンポーネントを使用する場合は、componentにReactElementを設定します。componentは、value(File)とindexを提供します。

編集可能な例

<FileInput
  placeholder="multiple"
  multiple
  component={({ value: { name } }) => <Tag>{name}</Tag>}
/>
Copied!

ファイル名の整形する

ファイル名の整形する場合は、formatを使用します。formatは、Fileを提供します。

編集可能な例

<FileInput
  placeholder="multiple"
  multiple
  format={({ name }) => `${name.substring(0, name.indexOf("."))}`}
/>
Copied!

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

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

編集可能な例

<VStack>
  <FileInput focusBorderColor="green.500" placeholder="custom border color" />
  <FileInput
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

無効化する

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

編集可能な例

<VStack>
  <For each={["outline", "filled", "flushed", "unstyled"]}>
    {(variant, index) => (
      <FileInput
        key={index}
        isDisabled
        variant={variant}
        placeholder={variant}
      />
    )}
  </For>

  <FormControl isDisabled label="Upload file">
    <FileInput type="email" placeholder="your file" />
  </FormControl>
</VStack>
Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <For each={["outline", "filled", "flushed", "unstyled"]}>
    {(variant, index) => (
      <FileInput
        key={index}
        isReadOnly
        variant={variant}
        placeholder={variant}
      />
    )}
  </For>

  <FormControl isReadOnly label="Upload file">
    <FileInput type="email" placeholder="your file" />
  </FormControl>
</VStack>
Copied!

無効な入力にする

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

編集可能な例

<VStack>
  <For each={["outline", "filled", "flushed", "unstyled"]}>
    {(variant, index) => (
      <FileInput
        key={index}
        isInvalid
        variant={variant}
        placeholder={variant}
      />
    )}
  </For>

  <FormControl isInvalid label="Upload file" errorMessage="File is required.">
    <FileInput type="email" placeholder="your file" />
  </FormControl>
</VStack>
Copied!

アドオンを追加する

アドオンを追加する場合は、InputをInputGroupでラッピングし、InputLeftAddonまたはInputRightAddonを使用します。

編集可能な例

<InputGroup>
  <InputLeftAddon>
    <FileIcon />
  </InputLeftAddon>
  <FileInput type="tel" placeholder="Please upload file" />
</InputGroup>
Copied!

要素を追加する

要素を追加する場合は、InputをInputGroupでラッピングし、InputLeftElementまたはInputRightElementを使用します。

編集可能な例

<InputGroup>
  <InputLeftElement>
    <FileIcon color="gray.500" />
  </InputLeftElement>
  <FileInput type="email" placeholder="Please upload file" />
</InputGroup>
Copied!

値をリセットする

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

編集可能な例

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

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

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

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

    <InputGroup>
      <FileInput
        multiple
        value={value}
        onChange={onChange}
        resetRef={resetRef}
      />

      {value && value.length ? (
        <InputRightElement isClickable onClick={onReset}>
          <XIcon color="gray.500" />
        </InputRightElement>
      ) : null}
    </InputGroup>
  </VStack>
)
Copied!

制御する

編集可能な例

const [value, onChange] = useState<File[] | null>(null)

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

    <FileInput value={value} onChange={onChange} multiple />
  </VStack>
)
Copied!

React Hook Formを使う

編集可能な例

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

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

const onReset = () => {
  setValue("fileInput", 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.fileInput}
      label="Files"
      errorMessage={errors.fileInput ? errors.fileInput.message : undefined}
    >
      <Controller
        name="fileInput"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <InputGroup>
            <FileInput multiple {...field} resetRef={resetRef} />

            {field.value && field.value.length ? (
              <InputRightElement isClickable onClick={onReset}>
                <XIcon color="gray.500" />
              </InputRightElement>
            ) : null}
          </InputGroup>
        )}
      />
    </FormControl>

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

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

前ColorPicker次FileButton