File Uploader
A drag-and-drop file upload component with support for multiple files, file type filtering, and size validation
Single File Upload
Click to upload or drag and drop
Single file • Max 5 MB
Multiple Files Upload
Click to upload or drag and drop
Up to 5 files • Max 10 MB
Images Only (PNG, JPG, GIF, WebP)
Click to upload or drag and drop
Up to 3 files • Max 5 MB
Documents Only (PDF, DOC, TXT)
Click to upload or drag and drop
Up to 3 files • Max 20 MB
Small File Size Limit (1MB)
Click to upload or drag and drop
Up to 2 files • Max 1 MB
Disabled State
Click to upload or drag and drop
Single file • Max 10 MB
Compact Version
Click to upload or drag and drop
Up to 2 files • Max 5 MB
FileUploader Component
tsx
1import React, { useState, useRef, DragEvent } from "react";2import { Upload, File, X, Image, FileText } from "lucide-react";3import { cn } from "@/lib/cn";45interface FileUploaderProps {6 multiple?: boolean;7 accept?: string;8 maxSize?: number; // in bytes9 maxFiles?: number;10 disabled?: boolean;