Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Dropzone

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

ソース@yamada-ui/dropzone

インポート

pnpm add @yamada-ui/dropzone
Copied!
import {
Dropzone,
DropzoneAccept,
DropzoneReject,
DropzoneIdle,
} from "@yamada-ui/dropzone"
Copied!
  • Dropzone: ファイルをドラッグアンドドロップでアップロードするためのコンポーネントです。
  • DropzoneAccept: ファイルが受け入れられたときに表示されるコンポーネントです。
  • DropzoneReject: ファイルが拒否されたときに表示されるコンポーネントです。
  • DropzoneIdle: アイドル状態のときに表示されるコンポーネントです。

使い方

編集可能な例

<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!

複数選択を許容する

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

編集可能な例

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

拡張子を指定する

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

また、acceptを簡単に指定できるIMAGE_ACCEPT_TYPEPDF_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>
      <UploadIcon fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <XIcon 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>
      <UploadIcon fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <XIcon 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>
      <UploadIcon fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <XIcon 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>
      <UploadIcon fontSize="6xl" color="success" />
    </DropzoneAccept>

    <DropzoneReject>
      <XIcon 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!

無効化する

無効化する場合は、isDisabledtrueに設定します。

編集可能な例

<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!

読み取り専用にする

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

編集可能な例

<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!

無効な入力にする

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

編集可能な例

<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!

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

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

編集可能な例

<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でこのページを編集する

FileButtonSlider