Skip to main content

Installation

npx shadcn@latest add @blocks/file-upload-04
This installs the component and required dependencies (lucide-react, sonner).

Usage

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

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

Features

This component includes:
  • 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

Build docs developers (and LLMs) love