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.

View source Installation

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

Import

import { FileUpload } from '@velocityuikit/velocityui'

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

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

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:

/* 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  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

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