Upload, Asgard Docs

Inputs & forms

A full drag-and-drop upload system.

UploadZone provides a drag-and-drop file upload area with built-in validation, while UploadList displays file status.

Key features:

Drag-and-drop or click-to-browse file selection
config for maxFileSize, accept (MIME types), and maxFiles
Validation errors via onValidationError callback
UploadList companion for displaying upload progress

Loading preview…

When to use it

Attachment and document submission forms
Image gallery and product-photo uploads
Bulk asset import dashboards
Avatar pickers (pair with ImageCropper)

Properties

Prop	Type	Default	Description
`config`	`Partial<UploadConfig>`	—	Configuration object controlling maxFileSize, accept (MIME types), and maxFiles limits.
`onFilesAdd`	`(files: UploadFile[]) => void`	—	Callback fired when valid files are added via drop or file dialog.
`onValidationError`	`(file: File, error: string) => void`	—	Callback fired when a file fails validation (size, type, or count).
`disabled`	`boolean`	`false`	Disables the upload zone, preventing file drops and clicks.
`height`	`number \| string`	—	Height of the drop zone area.
`title`	`string`	—	Main title text displayed in the drop zone.
`description`	`string`	—	Descriptive text shown below the title in the drop zone.
`icon`	`ReactNode`	—	Custom icon displayed in the center of the drop zone.

Notes

UploadZone handles the drag-and-drop interaction and file dialog; UploadList is a separate component for displaying file status.
The config object supports maxFileSize (in bytes), accept (array of MIME types), and maxFiles to control validation.
Files that fail validation trigger onValidationError rather than onFilesAdd, allowing you to display custom error messages.

Presets