Attachments

A file upload and attachment management component powered by FilePond. Supports drag-and-drop, image previews, PDF previews, file-type validation, and file-size limits.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { Attachments } from "@xocialive/ui-components";

Basic usage

<Attachments
  onFilesChange={(files) => setAttachments(files)}
  acceptedTypes={["image/*", "application/pdf"]}
  maxFileSize="10MB"
/>

With existing files (edit mode)

<Attachments
  initialFiles={existingAttachments}
  onFilesChange={(files) => setAttachments(files)}
  onFileRemove={(fileId) => removeAttachment(fileId)}
/>

Props

Prop	Type	Default	Description
initialFiles	AttachmentFile[]	[]	Pre-populated files (edit mode)
onFilesChange	(files: File[]) => void	—	Called when the file list changes
onFileRemove	(fileId: string) => void	—	Called when an existing file is removed
acceptedTypes	string[]	All types	MIME type filter
maxFileSize	string	"50MB"	Maximum file size per file (e.g., "5MB")
maxFiles	number	10	Maximum number of files
disabled	boolean	false	Disables the dropzone
sx	SxProps<Theme>	—	Root element style overrides