103 lines
No EOL
2.9 KiB
TypeScript
103 lines
No EOL
2.9 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { cn } from "@/lib/utils"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Loader2 } from "lucide-react"
|
|
|
|
interface FileUploadAreaProps {
|
|
onFileSelected?: (file: File) => void
|
|
isLoading?: boolean
|
|
className?: string
|
|
}
|
|
|
|
const FileUploadArea = React.forwardRef<HTMLDivElement, FileUploadAreaProps>(
|
|
({ onFileSelected, isLoading = false, className }, ref) => {
|
|
const [isDragging, setIsDragging] = React.useState(false)
|
|
const fileInputRef = React.useRef<HTMLInputElement>(null)
|
|
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(true)
|
|
}
|
|
|
|
const handleDragLeave = (e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(false)
|
|
}
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(false)
|
|
|
|
const files = Array.from(e.dataTransfer.files)
|
|
if (files.length > 0 && onFileSelected) {
|
|
onFileSelected(files[0])
|
|
}
|
|
}
|
|
|
|
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = Array.from(e.target.files || [])
|
|
if (files.length > 0 && onFileSelected) {
|
|
onFileSelected(files[0])
|
|
}
|
|
}
|
|
|
|
const handleClick = () => {
|
|
if (!isLoading) {
|
|
fileInputRef.current?.click()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"relative flex min-h-[150px] w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-background p-6 text-center transition-colors hover:bg-muted/50",
|
|
isDragging && "border-primary bg-primary/5",
|
|
isLoading && "cursor-not-allowed opacity-50",
|
|
className
|
|
)}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
onClick={handleClick}
|
|
>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
onChange={handleFileSelect}
|
|
className="hidden"
|
|
disabled={isLoading}
|
|
/>
|
|
|
|
<div className="flex flex-col items-center gap-4">
|
|
{isLoading && (
|
|
<div className="rounded-full bg-muted p-4">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
{isLoading ? "Processing file..." : "Drop files here or click to upload"}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{isLoading ? "Please wait while your file is being processed" : ""}
|
|
</p>
|
|
</div>
|
|
|
|
{!isLoading && (
|
|
<Button size="sm">
|
|
+ Upload
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
FileUploadArea.displayName = "FileUploadArea"
|
|
|
|
export { FileUploadArea } |