File Upload Drag & Drop

​

Installation

npx shadcn@latest add @blocks/file-upload-04

​

Usage

import FileUpload04 from "@/components/file-upload-04"

export default function Page() {
  return <FileUpload04 />
}

​

Features

• Drag and drop file upload
• File type validation (CSV, XLSX, XLS)
• Real-time upload progress bar
• Toast notifications for errors using Sonner
• File icon detection based on file type
• Formatted file size display
• Dummy preview file for demonstration
• Upload state management
• Cancel and upload actions with disabled states
• File reset functionality