Skip to main content

File Upload

File Upload is a form control that lets people pick or drop files, such as attaching documents or uploading photos.

Import

import { FileUpload } from '@vortexlabs/vortex';
import type { FileUploadProps } from '@vortexlabs/vortex';

Other links

FileUpload.Root

FileUpload.Root props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`id`	`string`	No default value
`error`	`boolean`	No default value
`disabled`	`boolean`	No default value
`required`	`boolean`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

FileUpload.Label

FileUpload.Label props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value

FileUpload.Dropzone

FileUpload.Dropzone props
Prop	Type	Default	Attributes
`name`	`string`	No default value
`accept`	`string`	No default value
`multiple`	`boolean`	No default value
`title`	`React.ReactNode`	`Drag and drop files here`
`dragOverTitle`	`React.ReactNode`	`Drop files to upload`
`description`	`React.ReactNode`	No default value
`startSlot`	`React.ReactNode`	`Upload icon.`
`buttonLabel`	`React.ReactNode`	`Choose files`
`buttonProps`	`object`	`{ variant: "secondary", size: "sm" }`
`onChange`	`callback`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value
`inputAttributes`	`object`	No default value
`ref`	`ref`	No default value

FileUpload.ErrorMessage

FileUpload.ErrorMessage props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value

FileUpload.List

FileUpload.List props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

FileUpload.Item

FileUpload.Item props
Prop	Type	Default	Attributes
`fileName`	`string`	No default value
`status`	`union`	`completed`
`description`	`React.ReactNode`	No default value
`statusText`	`React.ReactNode`	No default value
`progress`	`number`	`0`
`errorMessage`	`React.ReactNode`	No default value
`icon`	`union`	`File icon.`
`onCancel`	`callback`	No default value
`onRemove`	`callback`	No default value
`onRetry`	`callback`	No default value
`retryLabel`	`React.ReactNode`	`Retry`
`cancelAriaLabel`	`string`	`Cancel upload of {fileName}`
`removeAriaLabel`	`string`	`Remove {fileName}`
`className`	`union`	No default value
`attributes`	`object`	No default value