FileUpload

Drag-and-drop file upload zone with click-to-browse fallback. Shows selected files in a removable list and validates against an optional maxSize cap.

Import

tsx

import { FileUpload } from '@velocityuikit/velocityui'

Preview

Basic

AttachmentChoose files or drag and dropPNG, JPG, PDF up to 10 MB

Multiple files

Gallery imagesChoose files or drag and dropPNG or JPG, up to 5 MB each

Disabled

Upload (disabled)Choose files or drag and dropNot available right now

Props

Prop	Type	Default	Description
onChange	`(files: File[]) => void`	—	Callback fired when the file selection changes.
accept	`string`	—	MIME types or file extensions to accept, e.g. "image/*" or ".pdf".
multiple	`boolean`	`false`	Allows selecting multiple files.
maxSize	`number`	—	Maximum file size in bytes. Triggers an error message if exceeded.
label	`string`	—	Label displayed above the drop zone.
hint	`string`	—	Hint text rendered inside the drop zone.
error	`string`	—	Error message rendered below the drop zone.
disabled	`boolean`	`false`	Disables interaction.

Examples

Basic

tsx

import { FileUpload } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <FileUpload
      label="Attachment"
      hint="PNG, JPG, PDF up to 10 MB"
      onChange={(files) => console.log(files)}
    />
  )
}

Multiple files with size limit

tsx

import { FileUpload } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <FileUpload
      multiple
      accept="image/*"
      maxSize={5 * 1024 * 1024}
      label="Gallery images"
      hint="Up to 5 MB each"
      onChange={(files) => console.log(files)}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */