Dropzone

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

Drag file here or click to select file

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

Usage

import { Dropzone } from "@yamada-ui/react"

import { Dropzone } from "@/components/ui"

import { Dropzone } from "@workspaces/ui"

<Dropzone.Root>
  <Dropzone.Title />
  <Dropzone.Description />
  <Dropzone.Accept>
    <Dropzone.Icon />
  </Dropzone.Accept>
  <Dropzone.Reject>
    <Dropzone.Icon />
  </Dropzone.Reject>
  <Dropzone.Idle>
    <Dropzone.Icon />
  </Dropzone.Idle>
</Dropzone.Root>

Dropzone internally uses react-dropzone.

Change Variant

Drag file here or click to select file

<VStack>
  <For each={["dashed", "solid", "panel"]}>
    {(variant, index) => (
      <Dropzone.Root key={index} variant={variant}>
        <Text>Drag file here or click to select file</Text>
      </Dropzone.Root>
    )}
  </For>
</VStack>

Change Size

Drag file here or click to select file

<VStack>
  <For each={["xs", "sm", "md", "lg"]}>
    {(size, index) => (
      <Dropzone.Root key={index} size={size}>
        <Text>Drag file here or click to select file</Text>
      </Dropzone.Root>
    )}
  </For>
</VStack>

Allow Multiple Selection

To allow multiple selection, set multiple to true.

Drag files here or click to select files

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

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.

Drag image here or click to select image

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

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

Specify Maximum File Size

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

Drag file here or click to select file

Attach as many files as you like, each file should not exceed 5mb

<Dropzone.Root maxSize={3 * 1024 ** 2}>
  <VStack alignItems="center" gap="xs">
    <Dropzone.Title>Drag file here or click to select file</Dropzone.Title>
    <Dropzone.Description>
      Attach as many files as you like, each file should not exceed 5mb
    </Dropzone.Description>
  </VStack>
</Dropzone.Root>

Specify Maximum Number of Uploadable Files

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

Drag file here or click to select file

Attach as many files as you like, can upload up to 3 files

<Dropzone.Root maxFiles={3} multiple>
  <VStack alignItems="center" gap="xs">
    <Dropzone.Title>Drag file here or click to select file</Dropzone.Title>
    <Dropzone.Description>
      Attach as many files as you like, can upload up to 3 files
    </Dropzone.Description>
  </VStack>
</Dropzone.Root>

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.

Drag images here or click to select files

Attach as many files as you like, each file should not exceed 5mb

<Dropzone.Root accept={Dropzone.IMAGE_ACCEPT_TYPE} maxSize={3 * 1024 ** 2}>
  <HStack>
    <Dropzone.Accept>
      <Dropzone.Icon as={UploadIcon} />
    </Dropzone.Accept>

    <Dropzone.Reject>
      <Dropzone.Icon as={XIcon} />
    </Dropzone.Reject>

    <Dropzone.Idle>
      <Dropzone.Icon as={ImageIcon} />
    </Dropzone.Idle>

    <VStack gap="xs">
      <Dropzone.Title>Drag images here or click to select files</Dropzone.Title>
      <Dropzone.Description>
        Attach as many files as you like, each file should not exceed 5mb
      </Dropzone.Description>
    </VStack>
  </HStack>
</Dropzone.Root>

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.

Drag images here or click to select files

Attach as many files as you like, each file should not exceed 5mb

<Dropzone.Root
  accept={Dropzone.IMAGE_ACCEPT_TYPE}
  maxSize={3 * 1024 ** 2}
  onDrop={(acceptedFiles, fileRejections) =>
    console.log("dropped", acceptedFiles, fileRejections)
  }
>
  <HStack>
    <Dropzone.Accept>
      <Dropzone.Icon as={UploadIcon} />
    </Dropzone.Accept>

    <Dropzone.Reject>
      <Dropzone.Icon as={XIcon} />
    </Dropzone.Reject>

    <Dropzone.Idle>
      <Dropzone.Icon as={ImageIcon} />
    </Dropzone.Idle>

    <VStack gap="xs">
      <Dropzone.Title>Drag images here or click to select files</Dropzone.Title>
      <Dropzone.Description>
        Attach as many files as you like, each file should not exceed 5mb
      </Dropzone.Description>
    </VStack>
  </HStack>
</Dropzone.Root>

Handle Only Accepted Files

To handle only accepted files, use onDropAccepted.

Drag images here or click to select files

Attach as many files as you like, each file should not exceed 5mb

<Dropzone.Root
  accept={Dropzone.IMAGE_ACCEPT_TYPE}
  maxSize={3 * 1024 ** 2}
  onDropAccepted={(files) => console.log("accepted", files)}
>
  <HStack>
    <Dropzone.Accept>
      <Dropzone.Icon as={UploadIcon} />
    </Dropzone.Accept>

    <Dropzone.Reject>
      <Dropzone.Icon as={XIcon} />
    </Dropzone.Reject>

    <Dropzone.Idle>
      <Dropzone.Icon as={ImageIcon} />
    </Dropzone.Idle>

    <VStack gap="xs">
      <Dropzone.Title>Drag images here or click to select files</Dropzone.Title>
      <Dropzone.Description>
        Attach as many files as you like, each file should not exceed 5mb
      </Dropzone.Description>
    </VStack>
  </HStack>
</Dropzone.Root>

Handle Only Rejected Files

To handle only rejected files, use onDropRejected.

Drag images here or click to select files

Attach as many files as you like, each file should not exceed 5mb

<Dropzone.Root
  accept={Dropzone.IMAGE_ACCEPT_TYPE}
  maxSize={3 * 1024 ** 2}
  onDropRejected={(files) => console.log("rejected", files)}
>
  <HStack>
    <Dropzone.Accept>
      <Dropzone.Icon as={UploadIcon} />
    </Dropzone.Accept>

    <Dropzone.Reject>
      <Dropzone.Icon as={XIcon} />
    </Dropzone.Reject>

    <Dropzone.Idle>
      <Dropzone.Icon as={ImageIcon} />
    </Dropzone.Idle>

    <VStack gap="xs">
      <Dropzone.Title>Drag images here or click to select files</Dropzone.Title>
      <Dropzone.Description>
        Attach as many files as you like, each file should not exceed 5mb
      </Dropzone.Description>
    </VStack>
  </HStack>
</Dropzone.Root>

Change Border Color

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

Drag file here or click to select file

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

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

Disable

To disable, set disabled to true.

Drag file here or click to select file

Upload file

Drag file here or click to select file

<VStack>
  <Dropzone.Root disabled>
    <Text>Drag file here or click to select file</Text>
  </Dropzone.Root>

  <Field.Root disabled label="Upload file">
    <Dropzone.Root>
      <Text>Drag file here or click to select file</Text>
    </Dropzone.Root>
  </Field.Root>
</VStack>

Read-Only

To read-only, set readOnly to true.

Drag file here or click to select file

Upload file

Drag file here or click to select file

<VStack>
  <Dropzone.Root readOnly>
    <Text>Drag file here or click to select file</Text>
  </Dropzone.Root>

  <Field.Root label="Upload file" readOnly>
    <Dropzone.Root>
      <Text>Drag file here or click to select file</Text>
    </Dropzone.Root>
  </Field.Root>
</VStack>

Invalid

To set invalid state, set invalid to true.

Drag file here or click to select file

Upload file

Drag file here or click to select file

File is required.

<VStack>
  <Dropzone.Root invalid>
    <Text>Drag file here or click to select file</Text>
  </Dropzone.Root>

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

Use Loading Animation

To use a loading animation, set loading to true.

Drag file here or click to select file

<VStack>
  <Dropzone.Root loading>
    <Text>Drag file here or click to select file</Text>
  </Dropzone.Root>

  <Dropzone.Root loading loadingScheme="grid">
    <Text>Drag file here or click to select file</Text>
  </Dropzone.Root>

  <Dropzone.Root loading loadingProps={{ color: "blue" }}>
    <Text>Drag file here or click to select file</Text>
  </Dropzone.Root>
</VStack>

Control

Drag file here or click to select file

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

return (
  <VStack>
    <Button onClick={() => openRef.current()}>Select file</Button>

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

Props

Dropzone.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"sm"`	`"full" \| "lg" \| "md" \| "sm" \| "xs"` The size of the component.
`variant`	`"dashed"`	`"dashed" \| "panel" \| "plain" \| "solid"` The variant of the component.
`accept`	-	`Accept \| string[]` Set accepted file types.
`autoFocus`	`false`	`boolean` Set to true to focus the root element on render.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`getFilesFromEvent`	-	`DropzoneOptions["getFilesFromEvent"]` Use this to provide a custom file aggregator.
`inputProps`	-	`HTMLStyledProps<"input">` Props for dropzone input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`loading`	`false`	`boolean` If `true`, display the dropzone loading icon.
`loadingProps`	-	`DropzoneLoadingProps` Props for dropzone loading icon element.
`loadingScheme`	`"oval"`	`LoadingScheme` The loading scheme.
`maxFiles`	`0`	`number` Maximum accepted number of files. The default value is 0 which means there is no limitation to how many files are accepted.
`maxSize`	`Infinity`	`number` Maximum file size (in bytes).
`minSize`	`0`	`number` Minimum file size (in bytes).
`multiple`	`false`	`boolean` Allow drag and drop (or selection from the file dialog) of multiple files.
`name`	-	`string` The HTML `name` attribute used for forms.
`noClick`	`false`	`boolean` If true, disables click to open the native file selection dialog.
`noDrag`	`false`	`boolean` If true, disables drag and drop.
`noDragEventsBubbling`	`false`	`boolean` If true, stops drag event propagation to parents.
`noKeyboard`	`false`	`boolean` If true, disables `space` and `enter` to open the native file selection dialog. Note that it also stops tracking the focus state.
`onDragEnter`	-	`DropzoneOptions["onDragEnter"]` Callback for when the dragenter event occurs.
`onDragLeave`	-	`DropzoneOptions["onDragLeave"]` Callback for when the dragleave event occurs.
`onDragOver`	-	`DropzoneOptions["onDragOver"]` Callback for when the dragover event occurs.
`onDrop`	-	`DropzoneOptions["onDrop"]` Callback for when the drop event occurs. Note that this callback is invoked after the `getFilesFromEvent` callback is done.
`onDropAccepted`	-	`DropzoneOptions["onDropAccepted"]` Callback for when the drop event occurs. Note that if no files are accepted, this callback is not invoked.
`onDropRejected`	-	`DropzoneOptions["onDropRejected"]` Callback for when the drop event occurs. Note that if no files are rejected, this callback is not invoked.
`onError`	-	`DropzoneOptions["onError"]` Callback for when there's some error from any of the promises.
`onFileDialogCancel`	-	`DropzoneOptions["onFileDialogCancel"]` Callback for when closing the file dialog with no selection.
`onFileDialogOpen`	-	`DropzoneOptions["onFileDialogOpen"]` Callback for when opening the file dialog.
`openRef`	-	`RefObject<() => void>` Ref to a open function.
`overlayProps`	-	`DropzoneOverlayProps` Props for dropzone overlay element.
`preventDropOnDocument`	`true`	`boolean` If false, allow dropped items to take over the current browser window.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`useFsAccessApi`	`false`	`boolean` If true, use the File System API to read files.
`validator`	-	`DropzoneOptions["validator"]` Custom validation function. It must return null if there's no errors.

Dropzone.Description

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Dropzone.Icon

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Dropzone.Title

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Accessibility

If you are not using Field.Root, set aria-label or aria-labelledby to Dropzone.Root.

<Dropzone.Root aria-label="Upload file">
  <Text>Drag file here or click to select file</Text>
</Dropzone.Root>

<VStack gap="sm">
  <Text as="h3" id="label">
    Upload file
  </Text>

  <Dropzone.Root aria-labelledby="label">
    <Text>Drag file here or click to select file</Text>
  </Dropzone.Root>
</VStack>

Key	Description	State
`Space`, `Enter`	Opens the file selection dialog.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Dropzone.Root`	`role="presentation"`	Indicates that this is a presentation.
	`aria-disabled`	Sets to `"true"` when `disabled`, `readOnly`, or `loading` is set.
`input`	`aria-labelledby`	Sets the `id` of the associated `Dropzone.Root`.
	`aria-disabled`	Sets to `"true"` when `disabled` is set.
	`aria-invalid`	Sets to `"true"` when `invalid` is set.
	`aria-readonly`	Sets to `"true"` when `readOnly` is set.
	`aria-required`	Sets to `"true"` when `required` is set.
	`aria-describedby`	If `Dropzone.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.

Similar Components

FileButton is a button component used for users to select files.

FileInput is a component used for users to select files.

Checkbox is a component used for allowing users to select multiple values from multiple options.

ColorSelector is a component used by the user to select a color.

Editable is a component used to obtain inline editable text input.

Field is a component used to group form elements with label, helper message, error message, etc.

Fieldset is a component used to group elements such as legends, helper messages, and error messages in a fieldset element.

Form is a component used to group multiple form elements.

Uses Components & Hooks

Fade is a component that gradually shows or hides an element.

Input is a component used to obtain text input from the user.

Loading is a component displayed during waiting times, such as when data is being loaded.

Portal is a component that renders elements outside of the current DOM hierarchy.

Field is a component used to group form elements with label, helper message, error message, etc.