Dropzone

import { Dropzone } from '@hanzo/ui'

export function Default() {
  return <Dropzone />
}

export function ImagesOnly() {
  const [rejected, setRejected] = useState(0)
  return (
    <YStack gap="$2" width="100%">
      <Dropzone
        accept={{ "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"] }}
        onFilesRejected={(files) => setRejected((n) => n + files.length)}
      />
      {rejected > 0 ? (
        <Paragraph color="$color11">
          {rejected} file{rejected === 1 ? "" : "s"} rejected — only images are accepted here.
        </Paragraph>
      ) : null}
    </YStack>
  )
}

export function SingleFile() {
  return <Dropzone maxFiles={1} />
}

export function Disabled() {
  return <Dropzone disabled />
}

Types

export type DropzoneAccept = Record<string, string[]>

export type DropzoneProps = {
  className?: string
  onFilesAccepted?: (files: File[]) => void
  onFilesRejected?: (files: File[]) => void
  maxFiles?: number
  maxSize?: number
  accept?: DropzoneAccept
  disabled?: boolean
}

Exports