---

## FileUpload
Drag-and-drop file upload with validation, image previews, progress tracking, and animated file list.

**Import:** `import { FileUpload } from '@urbicon-ui/blocks';`

### Examples
```svelte
<FileUpload
  bind:files
  multiple
  maxFiles={5}
  maxFileSize={10 * 1024 * 1024}
  title="Drop files here or click to browse"
  description="PDF, DOCX, XLSX — max 10 MB per file"
/>
```

```svelte
<FileUpload
  bind:files
  accept={IMAGE_MIME_TYPES}
  multiple
  maxFiles={8}
  title="Upload images"
  description="PNG, JPG, WebP — max 5 MB"
  onFileReject={(rejections) => console.log('Rejected:', rejections)}
/>
```

### Variants
- intent: neutral, primary (default: neutral)
- size: lg, md, sm (default: md)
- disabled: false, true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...FileUploadVariants | `VariantProps` | no |  | Styling variants from FileUploadVariants |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| accept | `string | string[]` | no |  | Accepted MIME types or file extensions (e.g. 'image/*', '.pdf'). |
| allowDrop | `boolean` | no | true | Enable drag-and-drop. |
| allowPaste | `boolean` | no | false | Enable paste from clipboard. |
| children | `Snippet` | no |  | Default slot for fully custom dropzone content. |
| class | `string` | no |  | Additional CSS class for the root element. |
| description | `string` | no |  | Dropzone description text (accepted types, limits). |
| disabled | `boolean` | no |  | Disable all interaction. |
| dropzoneIcon | `Snippet` | no |  | Custom dropzone icon snippet. |
| file | `File | null` | no |  | Convenience binding for single-file uses. Two-way: - Reads as `files[0]?.file ?? null`. - Setting to a `File` replaces the current selection (object URLs are   revoked, no validation re-runs — assumes the caller already validated). - Setting to `null` clears the list.  Recommended when `maxFiles === 1` (e.g. logo / avatar uploads). Use `bind:files` instead when you need progress, errors, or status metadata. |
| fileItem | `Snippet<[FileItemContext]>` | no |  | Custom file item renderer. Receives file entry and remove callback. |
| files | `FileUploadFile[]` | no |  | Current file list. Supports two-way binding. |
| maxFiles | `number` | no |  | Maximum number of files. |
| maxFileSize | `number` | no |  | Maximum file size in bytes. |
| minFileSize | `number` | no |  | Minimum file size in bytes. |
| mint | `MintProp` | no |  | Micro-interaction preset for the dropzone. |
| multiple | `boolean` | no |  | Allow selecting multiple files. |
| name | `string` | no |  | Shared `name` for native form submission. When set, the underlying hidden `<input type="file">` carries the current file list — including files added via drag/drop, paste, or programmatic `bind:files`, not just files picked through the file dialog. Submits as a `File[]` under `{name}` in the FormData payload. |
| onFileAccept | `(files: FileUploadFile[]) => void` | no |  | Fires when valid files are accepted. |
| onFileReject | `(rejections: FileRejection[]) => void` | no |  | Fires when files are rejected by validation. |
| onFileRemove | `(file: FileUploadFile) => void` | no |  | Fires when a file is removed. |
| onFilesChange | `(files: FileUploadFile[]) => void` | no |  | Fires when the file list changes (add or remove). |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ FileUpload: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| preventDocumentDrop | `boolean` | no | true | Prevent browser navigation when files are dropped outside the zone. |
| required | `boolean` | no |  | Mark as required for form validation. |
| slotClasses | `Partial<Record<FileUploadSlots, string>>` | no |  | Per-slot class overrides. |
| title | `string` | no |  | Dropzone title text. |
| unstyled | `boolean` | no |  | Strip all default styles. |
| validate | `(file: File) => FileUploadError[] | null` | no |  | Custom validation function. Return errors array or null. |
| intent | `'neutral' | 'primary'` | no | neutral | Controls the color theme and semantic meaning of the FileUpload. Affects the overall appearance and user perception. Available options: neutral, primary. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the FileUpload. Affects the component's physical footprint. Available options: lg, md, sm. |

Inherited from:
- Omit<FileUploadVariants, 'dragging' | 'invalid'> (omit-pattern)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)