124 lines
4.2 KiB
TypeScript
124 lines
4.2 KiB
TypeScript
// File: components/forms/file-upload.tsx
|
|
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import { UploadCloud, X, File, FileText, Image as ImageIcon } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FileUploadProps {
|
|
onFilesChange: (files: File[]) => void;
|
|
maxFiles?: number;
|
|
maxSize?: number; // MB
|
|
accept?: string; // e.g. ".pdf,.jpg,.png"
|
|
}
|
|
|
|
export function FileUpload({ onFilesChange, maxFiles = 5, maxSize = 50, accept }: FileUploadProps) {
|
|
const [dragActive, setDragActive] = useState(false);
|
|
const [files, setFiles] = useState<File[]>([]);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleDrag = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (e.type === "dragenter" || e.type === "dragover") {
|
|
setDragActive(true);
|
|
} else if (e.type === "dragleave") {
|
|
setDragActive(false);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragActive(false);
|
|
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
|
handleFiles(Array.from(e.dataTransfer.files));
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
e.preventDefault();
|
|
if (e.target.files && e.target.files[0]) {
|
|
handleFiles(Array.from(e.target.files));
|
|
}
|
|
};
|
|
|
|
const handleFiles = (newFiles: File[]) => {
|
|
// Validate size & type here if needed
|
|
const validFiles = newFiles.slice(0, maxFiles - files.length);
|
|
const updatedFiles = [...files, ...validFiles];
|
|
setFiles(updatedFiles);
|
|
onFilesChange(updatedFiles);
|
|
};
|
|
|
|
const removeFile = (idx: number) => {
|
|
const updatedFiles = files.filter((_, i) => i !== idx);
|
|
setFiles(updatedFiles);
|
|
onFilesChange(updatedFiles);
|
|
};
|
|
|
|
const getFileIcon = (type: string) => {
|
|
if (type.includes("image")) return <ImageIcon className="h-5 w-5 text-blue-500" />;
|
|
if (type.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />;
|
|
return <File className="h-5 w-5 text-gray-500" />;
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div
|
|
className={cn(
|
|
"relative flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed transition-colors",
|
|
dragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:bg-muted/5"
|
|
)}
|
|
onDragEnter={handleDrag}
|
|
onDragLeave={handleDrag}
|
|
onDragOver={handleDrag}
|
|
onDrop={handleDrop}
|
|
>
|
|
<input
|
|
ref={inputRef}
|
|
className="hidden"
|
|
type="file"
|
|
multiple
|
|
accept={accept}
|
|
onChange={handleChange}
|
|
/>
|
|
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6 text-center cursor-pointer" onClick={() => inputRef.current?.click()}>
|
|
<UploadCloud className="w-8 h-8 mb-2 text-muted-foreground" />
|
|
<p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
|
|
<span className="font-semibold">Click to upload</span> or drag and drop
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
PDF, DWG, DOCX (Max {maxSize}MB)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* File List */}
|
|
{files.length > 0 && (
|
|
<div className="space-y-2">
|
|
{files.map((file, idx) => (
|
|
<div key={idx} className="flex items-center justify-between p-2 bg-muted/40 rounded-md border text-sm">
|
|
<div className="flex items-center gap-2 overflow-hidden">
|
|
{getFileIcon(file.type)}
|
|
<span className="truncate max-w-[200px]">{file.name}</span>
|
|
<span className="text-xs text-muted-foreground">({(file.size / 1024 / 1024).toFixed(2)} MB)</span>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 text-muted-foreground hover:text-destructive"
|
|
onClick={() => removeFile(idx)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |