//
A robust, fully styled compound file uploader supporting drag-and-drop, mime-type validation, and size constraints.
bun add xiod-ui1import {2 FileUpload,3 FileUploadTrigger,4 FileUploadInput,5 FileUploadList,6 FileUploadItem,7 FileUploadItemIcon,8 FileUploadItemName,9 FileUploadItemSize,10 FileUploadItemProgress,11 FileUploadItemStatus,12 FileUploadItemRemove,13 Attachment,14 AttachmentMedia,15 AttachmentContent,16 AttachmentTitle,17 AttachmentDescription,18 AttachmentActions,19 AttachmentAction,20 AttachmentTrigger,21 AttachmentGroup22} from "xiod-ui/file-upload";1<FileUpload>2 <FileUploadTrigger />3 <FileUploadInput />4 <AttachmentTrigger />5 <AttachmentContent>6 <AttachmentTitle />7 <AttachmentDescription />8 <FileUploadList>9 <FileUploadItem />10 </FileUploadList>11 <AttachmentGroup>12 <FileUploadItem />13 </AttachmentGroup>14 <FileUploadItemIcon />15 <FileUploadItemName />16 <FileUploadItemSize />17 <FileUploadItemProgress />18 <FileUploadItemStatus />19 <FileUploadItemRemove />20 <Attachment />21 <AttachmentMedia />22 <AttachmentActions />23 <AttachmentAction />24 </AttachmentContent>25</FileUpload>| Prop | Type | Default | Description |
|---|---|---|---|
files | FileItem[]| undefined | - | |
onFilesChange | ((files: FileItem[]) => void)| undefined | - | |
onFilesAdded | ((files: File[]) => void)| undefined | - | |
onFileRemove | ((id: string) => void)| undefined | - | |
maxFiles | number| undefined | 5 | |
maxSizeMB | number| undefined | 10 | |
accept | string| undefined | - | |
disabled | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
fileItemReq | FileItem | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
state | AttachmentState| undefined | done | |
orientation | "horizontal"| "vertical"| null| undefined | horizontal | |
size | "default"| "sm"| "xs"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "image"| "icon"| null| undefined | icon |
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default"| "link"| "secondary"| "destructive"| "destructive-outline"| "ghost"| "outline"| null| undefined | - | |
size | "default"| "sm"| "lg"| "xs"| "xl"| "icon"| "icon-lg"| "icon-sm"| "icon-xl"| "icon-xs"| null| undefined | icon-xs | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |