Customization

Instruction label

Change the call-to-action text shown in the drop area:

<DropUpload instructionLabel="Drag your CV here" />

Auto-hide drop area

Hide the drop area once at least one file is attached:

<DropUpload autoHideDropArea />

Paste from the clipboard

A screenshot you just took, or a file copied in the file manager, attaches with

Ctrl/Cmd+V anywhere on the page — no need to click the drop area first. It's on by default:

<DropUpload pasteToUpload={false} />

Pasted files go through the same input the drop area writes to, so allowedFormats, the size limits, maxFiles, the magic-byte check and every callback (onFilesDropped, onFilesChanged, ...) behave exactly as they do on a drop.

Text pastes are untouched: the component only steps in when the clipboard actually carries files, and a paste over an <input>, a <textarea> or a contenteditable element is always left alone — an image pasted into a comment box next to the uploader won't also get attached.

Several uploaders on one page

A paste is a page-wide event with no target of its own, so the uploaders agree on which one takes it. The file is attached once, to:

1. the uploader that currently holds the focus, if any does; otherwise
2. the first uploader in document order.

So a page with two uploaders never attaches the same screenshot twice, and the one that takes it is predictable. If you want a specific uploader to be the only candidate, set pasteToUpload={false} on the others.

Stacked file list

By default every attached file is listed one below the other. Set fileListMode="stacked" to collapse them into a pile instead: only the most recently attached file is shown, the rest sit behind it as cards, and a +N chip expands the pile into the full list. Clicking again re-stacks it.

<DropUpload fileListMode="stacked" />

Useful when the uploader is embedded in a form and a long file list would push the rest of the layout around. The pile only appears from the second file onwards — with a single file attached both modes look the same.

The expand and collapse animations honour the visitor's prefers-reduced-motion setting: when it's on, the pile still expands, just without the transition.

Spotlight effect

Toggle the hover spotlight effect:

<DropUpload spotlight={false} />

Smoke on drop

When a file lands on the drop area a puff of smoke bursts from the exact point it hit, then drifts up and fades. It's on by default and turned off with a single prop:

<DropUpload dropSmoke={false} />

The cloud takes its colour from the theme — grey on light, pale on dark — and its size from the area it lands in, so the avatar circle gets a puff and a full-width drop area gets a billow. Any CSS colour overrides it:

<DropUpload dropSmokeColor="#c084fc" />

Visitors who asked their OS to reduce motion never see the effect, whatever dropSmoke is set to.

Border style

The drop area is drawn with a dotted border. borderSolid swaps it for a solid one:

<DropUpload borderSolid />

Drag colors

While files are dragged over the drop area two things light up: an inner border glow and the spotlight that follows the cursor. They default to #3b82f6 and #60a5fa respectively, and can be changed independently with any CSS color:

<DropUpload dragBorderColor="#a855f7" spotlightColor="#c084fc" />

dragBorderColor drives the pulsing glow inside the box; spotlightColor drives the blurred circle that follows the pointer. Setting spotlight={false} disables the spotlight entirely, so spotlightColor has no effect then.

dragBorderColor doubles as the component's accent: the per-file upload progress bar is filled with it, so the drag edge and the bar stay the same color. To part them, override the CSS variable on the component's root:

.my-uploader {
  --du-progress-fill: #f5b547;
}

Discard delay

Files are discarded via a long-press. Control the delay (in ms) with discardFileAwaitTime (default 700):

<DropUpload discardFileAwaitTime={300} />

Debug mode

debugMode reveals the native file input and extra logging — useful during development, not intended for production.