AI File Upload

1"use client";
2 
3import {
4  Check,
5  File,
6  FileImage,
7  FileText,
8  Loader2,
9  Upload,
10  X,
11} from "lucide-react";
12import Image from "next/image";
13import { useCallback, useEffect, useRef, useState } from "react";
14import { cn } from "@/lib/utils";
15import { Button } from "@/registry/new-york/ui/button";
16import {
17  Card,
18  CardContent,
19  CardDescription,
20  CardHeader,
21  CardTitle,
22} from "@/registry/new-york/ui/card";
23import { Progress } from "@/registry/new-york/ui/progress";
24 
25export interface UploadedFile {
26  id: string;
27  file: File;
28  preview?: string;
29  status: "uploading" | "processing" | "completed" | "error";
30  progress?: number;
31  error?: string;
32}
33 
34export interface AIFileUploadProps {
35  onFilesSelected?: (files: File[]) => void;
36  onFileRemove?: (fileId: string) => void;
37  uploadedFiles?: UploadedFile[];
38  acceptedTypes?: string[];
39  maxSize?: number;
40  maxFiles?: number;
41  className?: string;
42  showPreview?: boolean;
43  processingStatus?: Record<string, "processing" | "completed" | "error">;
44}
45 
46function formatFileSize(bytes: number): string {
47  if (bytes === 0) return "0 Bytes";
48  const k = 1024;
49  const sizes = ["Bytes", "KB", "MB", "GB"];
50  const i = Math.floor(Math.log(bytes) / Math.log(k));
51  return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
52}
53 
54function getFileIcon(type: string) {
55  if (type.startsWith("image/")) {
56    return FileImage;
57  }
58  if (
59    type.includes("text") ||
60    type.includes("document") ||
61    type.includes("pdf")
62  ) {
63    return FileText;
64  }
65  return File;
66}
67 
68function getFileTypeLabel(type: string): string {
69  if (type.startsWith("image/")) {
70    return "Image";
71  }
72  if (type.includes("pdf")) {
73    return "PDF";
74  }
75  if (type.includes("text")) {
76    return "Text";
77  }
78  if (
79    type.includes("code") ||
80    type.includes("javascript") ||
81    type.includes("typescript")
82  ) {
83    return "Code";
84  }
85  return "File";
86}
87 
88interface FileUploadErrorProps {
89  message: string;
90  onDismiss?: () => void;
91}
92 
93function FileUploadError({ message, onDismiss }: FileUploadErrorProps) {
94  return (
95    <div
96      aria-live="polite"
97      className="flex items-start gap-3 rounded-lg border border-destructive/50 bg-destructive/10 p-3"
98      role="alert"
99    >
100      <X
101        aria-hidden="true"
102        className="mt-0.5 size-4 shrink-0 text-destructive"
103      />
104      <p className="flex-1 text-destructive text-sm">{message}</p>
105      {onDismiss && (
106        <Button
107          aria-label="Dismiss error"
108// … truncated