Dropzone

Dropzone is a component used for uploading files via drag and drop.

Import

pnpm add @yamada-ui/dropzone

Copied!

@yamada-ui/dropzone is not included in @yamada-ui/react, so it needs to be installed separately.

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

Copied!

Dropzone: A component for uploading files via drag and drop.
DropzoneAccept: A component displayed when a file is accepted.
DropzoneReject: A component displayed when a file is rejected.
DropzoneIdle: A component displayed when in idle state.

Usage

Dropzone internally uses react-dropzone.

Editable example

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

Copied!

Change Variant

Editable example

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

Change Size

Editable example

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

Allow Multiple Selection

To allow multiple selection, set multiple to true.

Editable example

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

Copied!

Specify File Extensions

To specify file extensions, set accept to an array of strings or an object.

We also provide easy-to-use constants like IMAGE_ACCEPT_TYPE and 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!

Editable example

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

Specify Maximum File Size

To specify the maximum file size, set maxSize to a number (bytes).

Editable example

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

Specify Maximum Number of Uploadable Files

To specify the maximum number of uploadable files, set maxFiles to a number.

Editable example

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

Display According to Status

To control the display based on whether the file is accepted or rejected, use DropzoneAccept, DropzoneReject, DropzoneIdle.

DropzoneAccept: A component displayed when a file is accepted.
DropzoneReject: A component displayed when a file is rejected.
DropzoneIdle: A component displayed when in idle state.

Editable example

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

Handle Dropped Event

To handle the selection event, use onDrop.

Please note that it is always called regardless of whether the dropped file is accepted or rejected.

Editable example

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

Handle Only Accepted Files

To handle only accepted files, use onDropAccepted.

Editable example

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

Handle Only Rejected Files

To handle only rejected files, use onDropRejected.

Editable example

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

Change Border Color

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

Editable example

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

Disable

To disable, set isDisabled to true.

Editable example

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

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

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

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

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

Use Loading Animation

To use a loading animation, set isLoading to true.

Editable example

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

Control

Editable example

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!

Edit this page on GitHub

PreviousFileButton NextSlider