Skip to content
Pinky UI

forms

Smart Dropzone

A real file input with drag states and local validation hooks.

  • forms
  • files
  • dropzone
  • validation

Live preview

Quick usage

usage
import { SmartDropzone } from "@pinky-ui/systems";

<SmartDropzone label="Choose images" accept="image/*" onFiles={setFiles} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
acceptstring—MIME and extension rules mirrored by local validation.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Does not create object URLs or claim an upload backend.
  • Consumers own preview URL cleanup.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Frontend file selection and validation

When not to use

  • Pretending local acceptance means remote upload

Skill

Purpose

SmartDropzone provides local drag/drop and click-to-select states around a real file input. Use it for frontend selection and validation before a separate upload process.

State accepted types, size limits and whether multiple files are allowed. Avoid claiming files were uploaded, hiding the file picker alternative or validating only by extension. Processing and complete states must reflect real host state.

The label is keyboard activatable and outcomes use a live region. Touch uses the normal file picker. Validate early, release object URLs in consuming previews and never read or transmit files without explicit application intent.

Open this skill on its own page