File Dropzone

A drag-and-drop upload area that also supports click-to-browse. Handles drag counter logic correctly across child elements, filters by file type and max size, and exposes selected files via a callback.

Drag files here or click to browse

Max file size: 5 MB

Accepted: .png,.jpg,.jpeg,.gif,.webp

import { FileDropzone } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add file-dropzone

Import

import.tsx

import { FileDropzone } from "@aetherstack/patterns"

Usage

file-dropzone.tsx

import * as React from "react"
import { FileDropzone } from "@aetherstack/patterns"

export function MyUploader() {
  const [files, setFiles] = React.useState<File[]>([])

  return (
    <FileDropzone
      onFilesSelected={setFiles}
      accept=".png,.jpg,.jpeg"
      multiple
      maxSize={5 * 1024 * 1024}
    />
  )
}

Props

Prop	Type	Default	Description
onFilesSelected*	(files: File[]) => void	—	Called with the accepted files after a drop or file picker selection.
accept	string	—	MIME types or file extensions to accept, e.g. ".png,.jpg" or "image/*".
multiple	boolean	false	Allow selecting multiple files at once.
maxSize	number	—	Maximum file size in bytes. Files exceeding this are filtered out before onFilesSelected is called.
disabled	boolean	false	Disables all interaction and dims the zone.
children	ReactNode	—	Optional extra content rendered inside the dropzone.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→The zone has role="button" and tabIndex={0} so it is keyboard focusable.
→Pressing Enter or Space triggers the file picker dialog.
→aria-disabled is set when the disabled prop is true.
→The hidden <input type="file"> is sr-only and aria-hidden — screen readers interact with the button wrapper instead.