Dropzone

Dropzoneは、ファイルをドラッグアンドドロップでアップロードするために使用されるコンポーネントです。

インポート

pnpm add @yamada-ui/dropzone

Copied!

@yamada-ui/dropzoneは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。

import {
  Dropzone,
  DropzoneAccept,
  DropzoneReject,
  DropzoneIdle,
} from "@yamada-ui/dropzone"

Copied!

Dropzone: ファイルをドラッグアンドドロップでアップロードするためのコンポーネントです。
DropzoneAccept: ファイルが受け入れられたときに表示されるコンポーネントです。
DropzoneReject: ファイルが拒否されたときに表示されるコンポーネントです。
DropzoneIdle: アイドル状態のときに表示されるコンポーネントです。

使い方

Dropzoneは、内部的にreact-dropzoneを使用しています。

編集可能な例

<Dropzone>
  <Text>Drag file here or click to select file</Text>
</Dropzone>

Copied!

バリアントを変更する

編集可能な例

<VStack>
  <Dropzone variant="dashed">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone variant="solid">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone variant="unstyled">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>
</VStack>

Copied!

サイズを変更する

編集可能な例

<VStack>
  <Dropzone size="xs">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone size="sm">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone size="md">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone size="lg">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>
</VStack>

Copied!

複数選択を許容する

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

編集可能な例

<Dropzone multiple>
  <Text>Drag files here or click to select files</Text>
</Dropzone>

Copied!

拡張子を指定する

拡張子を指定する場合は、acceptに文字列の配列または、オブジェクトを設定します。

また、acceptを簡単に指定できるIMAGE_ACCEPT_TYPEやPDF_ACCEPT_TYPEなどを提供しています。

import {
  IMAGE_ACCEPT_TYPE,
  PDF_ACCEPT_TYPE,
  MS_WORD_ACCEPT_TYPE,
  MS_EXCEL_ACCEPT_TYPE,
  MS_POWER_POINT_ACCEPT_TYPE,
  EXE_ACCEPT_TYPE,
} from "@yamada-ui/dropzone"

Copied!

編集可能な例

<VStack>
  <Dropzone accept={IMAGE_ACCEPT_TYPE}>
    <Text>Drag image here or click to select image</Text>
  </Dropzone>

  <Dropzone accept={{ "image/*": [] }}>
    <Text>Drag image here or click to select image</Text>
  </Dropzone>
</VStack>

Copied!

ファイルサイズの最大値を指定する

ファイルサイズの最大値を指定する場合は、maxSizeに数値(バイト)を設定します。

編集可能な例

<Dropzone maxSize={3 * 1024 ** 2}>
  <VStack w="auto" gap="2xs">
    <Text fontSize="xl">Drag file here or click to select file</Text>
    <Text fontSize="sm">
      Attach as many files as you like, each file should not exceed 3mb
    </Text>
  </VStack>
</Dropzone>

Copied!

アップロード可能な最大数を指定する

アップロード可能な最大数を指定する場合は、maxFilesに数値を設定します。

編集可能な例

<Dropzone multiple maxFiles={3}>
  <VStack w="auto" gap="2xs">
    <Text fontSize="xl">Drag file here or click to select file</Text>
    <Text fontSize="sm">
      Attach as many files as you like, can upload up to 3 files
    </Text>
  </VStack>
</Dropzone>

Copied!

状態に応じた表示をする

ファイルを受け入れたか、拒否されたかの状態に応じて、表示を制御したい場合は、DropzoneAccept, DropzoneReject, DropzoneIdleを使用します。

DropzoneAccept: ファイルが受け入れられたときに表示されるコンポーネントです。
DropzoneReject: ファイルが拒否されたときに表示されるコンポーネントです。
DropzoneIdle: アイドル状態のときに表示されるコンポーネントです。

編集可能な例

<Dropzone accept={IMAGE_ACCEPT_TYPE} maxSize={3 * 1024 ** 2}>
  <HStack color={["blackAlpha.500", "whiteAlpha.500"]}>
    <DropzoneAccept>
      <Upload fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <X fontSize="6xl" color="danger" />
    </DropzoneReject>

    <DropzoneIdle>
      <ImageIcon fontSize="6xl" />
    </DropzoneIdle>

    <VStack gap="2xs">
      <Text fontSize="xl">Drag images here or click to select files</Text>
      <Text fontSize="sm">
        Attach as many files as you like, each file should not exceed 3mb
      </Text>
    </VStack>
  </HStack>
</Dropzone>

Copied!

ドロップされたイベントをハンドルする

選択のイベントをハンドルしたい場合は、onDropを使用しています。

ドロップされたファイルが受け入れられたか拒否されたかに関係なく、常に呼び出されることに注意してください。

編集可能な例

<Dropzone
  accept={IMAGE_ACCEPT_TYPE}
  maxSize={3 * 1024 ** 2}
  onDrop={(acceptedFiles, fileRejections) =>
    console.log(
      "accepted files",
      acceptedFiles,
      "rejected files",
      fileRejections,
    )
  }
>
  <HStack color={["blackAlpha.500", "whiteAlpha.500"]}>
    <DropzoneAccept>
      <Upload fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <X fontSize="6xl" color="danger" />
    </DropzoneReject>

    <DropzoneIdle>
      <ImageIcon fontSize="6xl" />
    </DropzoneIdle>

    <VStack gap="2xs">
      <Text fontSize="xl">Drag images here or click to select files</Text>
      <Text fontSize="sm">
        Attach as many files as you like, each file should not exceed 3mb
      </Text>
    </VStack>
  </HStack>
</Dropzone>

Copied!

受け入れられたファイルのみハンドルする

受け入れられたファイルのみハンドルしたい場合は、onDropAcceptedを使用します。

編集可能な例

<Dropzone
  accept={IMAGE_ACCEPT_TYPE}
  maxSize={3 * 1024 ** 2}
  onDropAccepted={(files) => console.log("accepted files", files)}
>
  <HStack color={["blackAlpha.500", "whiteAlpha.500"]}>
    <DropzoneAccept>
      <Upload fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <X fontSize="6xl" color="danger" />
    </DropzoneReject>

    <DropzoneIdle>
      <ImageIcon fontSize="6xl" />
    </DropzoneIdle>

    <VStack gap="2xs">
      <Text fontSize="xl">Drag images here or click to select files</Text>
      <Text fontSize="sm">
        Attach as many files as you like, each file should not exceed 3mb
      </Text>
    </VStack>
  </HStack>
</Dropzone>

Copied!

拒否されたファイルのみをハンドルする

拒否されたファイルのみをハンドルする場合は、onDropRejectedを使用します。

編集可能な例

<Dropzone
  accept={IMAGE_ACCEPT_TYPE}
  maxSize={3 * 1024 ** 2}
  onDropRejected={(files) => console.log("rejected files", files)}
>
  <HStack color={["blackAlpha.500", "whiteAlpha.500"]}>
    <DropzoneAccept>
      <Upload fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <X fontSize="6xl" color="danger" />
    </DropzoneReject>

    <DropzoneIdle>
      <ImageIcon fontSize="6xl" />
    </DropzoneIdle>

    <VStack gap="2xs">
      <Text fontSize="xl">Drag images here or click to select files</Text>
      <Text fontSize="sm">
        Attach as many files as you like, each file should not exceed 3mb
      </Text>
    </VStack>
  </HStack>
</Dropzone>

Copied!

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

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

編集可能な例

<VStack>
  <Dropzone focusBorderColor="green.500">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone isInvalid errorBorderColor="orange.500">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>
</VStack>

Copied!

無効化する

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

編集可能な例

<VStack>
  <Dropzone isDisabled>
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <FormControl label="Upload file" isDisabled>
    <Dropzone>
      <Text>Drag file here or click to select file</Text>
    </Dropzone>
  </FormControl>
</VStack>

Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <Dropzone isReadOnly>
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <FormControl label="Upload file" isReadOnly>
    <Dropzone>
      <Text>Drag file here or click to select file</Text>
    </Dropzone>
  </FormControl>
</VStack>

Copied!

無効な入力にする

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

編集可能な例

<VStack>
  <Dropzone isInvalid>
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <FormControl label="Upload file" isInvalid errorMessage="File is required.">
    <Dropzone>
      <Text>Drag file here or click to select file</Text>
    </Dropzone>
  </FormControl>
</VStack>

Copied!

ローディングアニメーションを使う

ローディングアニメーションを使う場合は、isLoadingをtrueにします。

編集可能な例

<VStack>
  <Dropzone isLoading>
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone isLoading loadingProps={{ variant: "grid" }}>
    <Text>Drag file here or click to select file</Text>
  </Dropzone>

  <Dropzone isLoading loadingProps={{ color: "secondary" }}>
    <Text>Drag file here or click to select file</Text>
  </Dropzone>
</VStack>

Copied!

制御する

編集可能な例

const openRef = useRef<() => void>(null)

const onOpen = () => {
  if (openRef.current) openRef.current()
}

return (
  <VStack>
    <Button onClick={onOpen}>Select file</Button>

    <Dropzone openRef={openRef}>
      <Text>Drag file here or click to select file</Text>
    </Dropzone>
  </VStack>
)

Copied!

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

前FileButton 次Slider