import { useFileInput } from "@/components/hooks/use-file-input" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" export function BasicExample() { const { fileName, error, fileInputRef, handleFileSelect, clearFile } = useFileInput({ maxSize: 2 }); return (

Basic File Upload

{fileName && ( )}

{fileName && (

Selected: {fileName}

)} {error && (

Error: {error}

)}

) } export function ImageUploader() { const { fileName, error, fileInputRef, handleFileSelect, fileSize, clearFile } = useFileInput({ accept: "image/*", maxSize: 5 }); return (

Image Upload

{fileName && ( )}

{fileName && (

Selected: {fileName}

Size: {(fileSize / (1024 * 1024)).toFixed(2)}MB

)} {error && (

Error: {error}

)}

) } export function DocumentUploader() { const { fileName, error, fileInputRef, handleFileSelect, clearFile } = useFileInput({ accept: ".pdf,.doc,.docx", maxSize: 10 }); return (

Document Upload

fileInputRef.current?.click()} > {fileName ? (

{fileName}

) : (

Click to upload or drag and drop
PDF, DOC up to 10MB

)}

{error && (

Error: {error}

)}

) }