Dropzone

The Dropzone component is a file input rendered as a dashed drop target. It supports click-to-browse and drag & drop, validates files against accept, $maxFiles, and $maxBytes, and shows preview thumbnails with remove buttons for the selected files.

The upload itself stays in your hands: the component only manages the file list and hands you File objects.

For design guidelines and all interactive states, see the Inputs design page.

import React from "react";
import { Dropzone } from "cherry-styled-components";

export default function Page() {
  return (
    <Dropzone
      accept="image/png,image/jpeg,image/webp"
      multiple
      $maxFiles={5}
      $maxBytes={5 * 1024 * 1024}
      $prompt="Drag images here"
      $browse="or click to browse"
      $hint="PNG, JPG or WebP · up to 5MB · max 5 files"
      $icon="ImageUp"
      onFilesChange={(files) => console.log(files)}
      onFilesRejected={(rejections) => console.warn(rejections)}
    />
  );
}

The inline variant is a compact horizontal row with a transparent background for embedding inside forms or modals. Without multiple, selecting a new file replaces the current one:

<Dropzone $inline accept="image/*" $prompt="Drag an image here" />

Properties

$promptstring

Bold primary prompt line. Defaults to "Drag & drop files here".

$browsestring

Optional "or click to browse" sub-line beneath the prompt.

$hintstring

Optional smaller hint line for accepted types and limits.

$iconIconProps

Name of the Lucide icon shown in the rounded tile. IconProps is a string union of all Lucide icon names, not an object. Defaults to "FileUp".

$inlineboolean

Compact horizontal variant with a transparent background.

$maxFilesnumber

Maximum number of files kept at once (with multiple).

$maxBytesnumber

Maximum size per file in bytes.

onFilesChange(files: File[]) => void

Called with the full current file list whenever it changes.

onFilesRejected(rejections: DropzoneRejection[]) => void

Called with the rejected files and a typed reason ("type", "size", or "count") so you can surface errors however you like, for example with a Toast.

acceptstring

Native accept filter. Also enforced for dropped files, including .ext and type/* patterns.

multipleboolean

Allows selecting several files. Without it, a new file replaces the current one.

disabledboolean

Disables the whole control: click-to-browse, drag & drop, and the thumbnail remove buttons stop working, and the drop target gets disabled styling. The drop target also disables itself once the file limit is reached.

All other native input attributes (name, id, form, required, and so on) are passed through to the hidden <input type="file" />, and a ref is forwarded to that same input.

matchesAccept

The matchesAccept(file, accept?) helper the component uses to validate dropped files is also exported. It checks a File against a comma-separated accept string, supporting .ext suffixes, type/* wildcards, and exact MIME types, and returns true when no accept string is given:

import { matchesAccept } from "cherry-styled-components";

matchesAccept(file, ".pdf,image/*"); // true for report.pdf or photo.png

View Source