File Dropzone

A drag-and-drop file upload zone with preview, validation, and file management.

Drag & drop files here

or click to browse

Max 5MB per file

gaia.png

2400.0 KB

field.png

828.0 KB

Usage in Gaia

Drag and drop anywhere. The fastest way to get files into the context window.

Features

Drag & Drop - Drop files directly into the zone
Click to Browse - Fallback file input
Image Preview - Thumbnails for image files
File Validation - Size and count limits
Remove Files - Delete individual files

Installation

npx shadcn@latest add https://ui.heygaia.io/r/file-dropzone.json

Usage

import { FileDropzone } from "@/components/ui/file-dropzone";
 
export default function Example() {
  return (
    <FileDropzone
      onFilesDropped={(files) => console.log(files)}
      accept="image/*,.pdf"
      maxSize={5 * 1024 * 1024}
      maxFiles={5}
    />
  );
}

Props

Prop	Type	Default	Description
onFilesDropped	(files) => void	-	Callback with dropped files
accept	string	-	Accepted file types
multiple	boolean	true	Allow multiple files
maxSize	number	10MB	Max file size in bytes
maxFiles	number	10	Maximum number of files
disabled	boolean	false	Disable the dropzone

Email Compose Card File Preview

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.