FileUpload

A drag-and-drop file upload component that displays image previews in a grid. Supports multiple files, configurable file type acceptance, a maximum file limit, and drag-to-reorder functionality.

Import

import { FileUpload } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<FileUpload
  onFilesSelected={(files) => console.log(files)}
  accept="image/*"
  multiple
  maxFiles={8}
/>
 
<FileUpload
  onFilesSelected={handleFiles}
  accept=".pdf"
  multiple={false}
  maxFiles={1}
/>

Props

Prop	Type	Default	Description
`onFilesSelected`*	(files: (File \| string)[]) => void	-	Callback fired when files are added, removed, or reordered.
`accept`	string	`'image/*'`	Accepted file types (e.g., 'image/*', '.pdf').
`multiple`	boolean	`true`	Whether multiple files can be uploaded.
`maxFiles`	number	`8`	Maximum number of files allowed.
`value`	(File \| string)[]	`[]`	Controlled array of current files. Can include File objects or URL strings.
`className`	string	-	Additional CSS classes to apply to the upload area.