File Dropzone

import { FileDropzone, DroppedFile } from "@/components/ui/file-dropzone";
import { useState } from "react";

export default function Example() {
  const [files, setFiles] = useState<DroppedFile[]>([]);

  return (
    <FileDropzone
      onFilesDropped={setFiles}
      accept="image/*"
      maxFiles={5}
      maxSize={10 * 1024 * 1024} // 10MB
    />
  );
}

{/* Images only */}
<FileDropzone accept="image/*" onFilesDropped={setFiles} />

{/* PDFs only */}
<FileDropzone accept=".pdf" onFilesDropped={setFiles} />

{/* Multiple types */}
<FileDropzone 
  accept="image/*,.pdf,.doc,.docx"
  acceptedFileTypes={["Images", "PDF", "Word"]}
  onFilesDropped={setFiles}
/>

<FileDropzone
  maxSize={5 * 1024 * 1024}  // 5MB per file
  maxFiles={3}                // Maximum 3 files
  onFilesDropped={setFiles}
/>

<FileDropzone
  multiple={false}
  onFilesDropped={(files) => {
    // Always receives array with single file
    const file = files[0];
  }}
/>

const [files, setFiles] = useState<DroppedFile[]>([]);

<FileDropzone
  accept="image/*"
  onFilesDropped={setFiles}
/>

// Each file in the array has:
// - file: File object
// - preview: string (URL for images)
// - id: string (unique identifier)

const initialFiles: DroppedFile[] = [
  {
    id: "1",
    file: existingFile,
    preview: "https://example.com/image.jpg"
  }
];

<FileDropzone
  initialFiles={initialFiles}
  onFilesDropped={setFiles}
/>

<FileDropzone onFilesDropped={setFiles}>
  <div className="p-8">
    <h3>Drop your files here</h3>
    <p>Or click to browse</p>
  </div>
</FileDropzone>

interface DroppedFile {
  id: string;          // Unique identifier
  file: File;          // Native File object
  preview?: string;    // Data URL for image previews
}