File Preview

import { FilePreview, UploadedFile } from "@/components/ui/file-preview";
import { useState } from "react";

export default function Example() {
  const [files, setFiles] = useState<UploadedFile[]>([
    {
      id: "1",
      url: "/images/photo.jpg",
      name: "vacation.jpg",
      type: "image/jpeg"
    },
    {
      id: "2",
      url: "/files/report.pdf",
      name: "annual-report.pdf",
      type: "application/pdf"
    }
  ]);

  const handleRemove = (id: string) => {
    setFiles(files.filter(f => f.id !== id));
  };

  return <FilePreview files={files} onRemove={handleRemove} />;
}

const files: UploadedFile[] = [
  {
    id: "1",
    url: "https://example.com/photo.jpg",
    name: "photo.jpg",
    type: "image/jpeg"  // Automatically shows thumbnail
  }
];

// Shows "PDF"
{ type: "application/pdf", name: "doc.pdf" }

// Shows "DOC"
{ type: "application/msword", name: "doc.docx" }

// Shows "MP4"
{ type: "video/mp4", name: "video.mp4" }

// Shows file extension when type is unknown
{ type: "application/octet-stream", name: "file.xyz" }

const files: UploadedFile[] = [
  {
    id: "1",
    url: "",
    name: "uploading.jpg",
    type: "image/jpeg",
    isUploading: true  // Shows spinner overlay
  }
];

<FilePreview
  files={files}
  onRemove={(id) => {
    console.log('Remove file:', id);
    // Update your files state
  }}
/>

const files: UploadedFile[] = [
  {
    id: "1",
    url: "/doc.pdf",
    name: "contract.pdf",
    type: "application/pdf",
    description: "Signed on 2024-03-15"  // Optional
  }
];

interface UploadedFile {
  id: string;             // Unique identifier
  url: string;            // File URL or data URL
  name: string;           // Display name
  type: string;           // MIME type
  description?: string;   // Optional description
  isUploading?: boolean;  // Show loading state
}

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

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

  const handleDrop = (droppedFiles: DroppedFile[]) => {
    const uploaded = droppedFiles.map(f => ({
      id: f.id,
      url: f.preview || URL.createObjectURL(f.file),
      name: f.file.name,
      type: f.file.type,
      isUploading: true
    }));

    setFiles(uploaded);
    
    // Simulate upload
    setTimeout(() => {
      setFiles(prev => prev.map(f => ({ ...f, isUploading: false })));
    }, 2000);
  };

  return (
    <div>
      <FileDropzone onFilesDropped={handleDrop} />
      <FilePreview 
        files={files}
        onRemove={(id) => setFiles(files.filter(f => f.id !== id))}
      />
    </div>
  );
}