Document
DocumentUploader
Drag-and-drop file upload zone with file type and size validation.
Document
The Document category provides a complete file management system — from drag-and-drop upload through grid/list browsing to in-browser preview. Components are composable: use XADocumentManager for a turnkey solution or assemble individual pieces for custom layouts.
Components
<XADocumentUploader />
A styled drag-and-drop upload zone. Validates file count and size before emitting. Shows an upload progress overlay when uploading is true.
<XADocumentUploader
:multiple="true"
accept="image/*,application/pdf"
:max-size="10 * 1024 * 1024"
:max-files="5"
:compact="false"
:uploading="isUploading"
@upload="handleFiles"
@error="handleError"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
multiple | Boolean | true | Allow multiple file selection |
accept | String | '*' | Accepted MIME types or extensions |
acceptLabel | String | '' | Human-readable accept label shown in UI |
maxSize | Number | 262144000 | Max file size in bytes (250 MB) |
maxFiles | Number | null | Max number of files per upload |
compact | Boolean | false | Compact mode for smaller spaces |
disabled | Boolean | false | Disable uploads |
uploading | Boolean | false | Show upload progress overlay |
Emits
| Event | Payload | Description |
|---|---|---|
upload | File[] | Valid files ready for upload |
error | { type, message } | Validation error (size/count exceeded) |
AI Context
component: XADocumentUploader
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Document
use-when: Providing a drag-and-drop file upload zone with file type and size validation. Emits validated File[] on upload. Use standalone or as part of XADocument.