File upload

A drop zone that is the whole button, and a file list that reports every file in words.

Refined portWildFileUpload.vueForms/File UploadWFileDrop

Try it

Drop files on it, click it, or add the samples. The site survey fails once, so you can retry it.

EvidenceOptional

Drop files here or browsePDF, CSV, JPG and PNG, up to 10 MB, 10 files at most.Or focus here and paste a screenshot

Nothing to hand?

Variant

Error

Disabled

<WFileDrop
  items={files}
  label="Evidence"
  hint="Optional"
  accept="image/*,.pdf,.csv"
  formats={['PDF', 'CSV', 'JPG', 'PNG']}
  maxSize={10 * 1024 * 1024}
  onAdd={upload}
  onRetry={upload}
  onCancel={cancel}
  onRemove={remove}
  onClear={clearAll}
/>

When to use

Attach files to a form or record: reports, spreadsheets, photos.
Take several files at once, each with its own progress and outcome.
Use the compact variant when the upload is one field among several.

Don’t use it

For words someone could type, such as a note. Use Textarea.
For picking something already in the system. Use Search select.

Anatomy

The drop zone, then the file list: a summary header with Clear all, and one row per file.

Drop files here or browsePDF, CSV, JPG and PNG, up to 10 MB, 10 files at most.Or focus here and paste a screenshot

6 files · 8.1 MB1 uploaded · 2 need attention

north-pump-service-report.pdf1.2 MBUploaded
tank-levels-2026.csv640 KBUploading · 62% · 4 s left
logger-photo-emu-park.jpg2.4 MBChecking the file
reseller-agreement.pdf820 KBWaiting
site-survey-bore-12.pdf3.1 MBFailed: connection lost
firmware-backup.zip14 MBPDF, CSV, JPG and PNG only

Each row shows the action its state needs: Cancel while it moves, Retry when it fails, Remove once it lands or is turned away.

Drag states

Drop files here or browsePDF and CSV, up to 10 MB, 10 files at most.

rest

Release to add 3 filesPDF and CSV, up to 10 MB, 10 files at most.

valid drag

PDF and CSV onlyPDF and CSV, up to 10 MB, 10 files at most.

wrong kind of file

The zone judges the kind of file before the drop, in colour and words together. Size and count are checked once the files land.

Compact

One row in place of the full zone. It keeps the drag states, paste and the list.

Acknowledgement note

Replaced the pressure sensor at Bore 12. Readings back to normal.

Photos

Attach photos or browseJPG, PNG and HEIC, up to 10 MB, 10 files at most.

1 file · 2.1 MB1 uploaded

bore-12-new-sensor.jpg2.1 MBUploaded

Content

Make the title a short instruction: “Attach photos”, “Drop files here”.
List formats in formats as people know them. Rejections are built from it: “PDF, CSV and JPG only”.
Write the field error as what’s missing: “Attach at least one photo of the installed logger.”

Accessibility

The zone is a button named by its label and title, described by its formats and any error, and it announces each drag message. Row actions name their file, such as “Retry site-survey-bore-12.pdf”.

Key	What it does
Tab	Moves from the zone to Clear all, then each row’s actions.
Enter / Space	On the zone, opens the file picker. On a row action, runs it.
Ctrl / ⌘ + V	On the zone, attaches a copied image.

Props

Prop	Type	Default	Description
items	DropItem[]	—	The files and their state, from queued to done or rejected.
accept	string	—	MIME types and extensions, as for a file input.
formats	string[]	—	Short names shown as tags beside the size limit.
maxSize	number	10 MB	Per file. Larger files are rejected with the reason.
maxFiles	number	10	Most files the list holds. Extras are rejected.
multiple	boolean	true	Allow more than one file per pick or drop.
variant	'default' \| 'compact'	'default'	A full zone, or one row for a form.
disabled	boolean	false	Blocks picking, dropping and pasting.
title	string	'Drop files here'	The zone’s instruction, and part of its name.
label / hint / help / error	string	—	Field label, hint, help line and error message.
paste	boolean	true	Attach a copied image by pasting on the focused zone.
onAdd	(accepted, rejected) => void	—	Files that passed validation, and those that didn’t, with reasons.
onRetry / onCancel / onRemove	(id) => void	—	The row actions.
onClear	() => void	—	Clear all, shown once nothing is moving.

Tokens

Token	Value	Where it lands
--global-neutral-grey-600	#DCDCDE	Resting dashed border.
--global-neutral-grey-800	#ADACB0	Border on hover.
--global-blue-1000	#1877F2	Focus and valid-drag edge, badge, progress.
--global-blue-100	#EBFAFF	Valid drag ground.
--color-error	#E12121	Error and wrong-kind edge, badge.
--global-red-100	#FEEBEB	Wrong-kind ground, rejected row.
--radius-xl	12px	Zone and list card.
--radius-lg	8px	Thumbnails and type tiles.