File Upload with Status Sections

​

Installation

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

​

Usage

import FileUpload06 from "@/components/file-upload-06"

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

​

Features

• Organized upload sections (Uploading and Finished)
• Multiple file upload support
• Real-time progress tracking per file
• Visual status indicators (Loader for uploading, CheckCircle for completed)
• Drag and drop dropzone
• Click to browse files
• File type restrictions (JPG, PNG, GIF)
• Individual file removal on hover
• Progress bars with percentage display
• Separated sections with visual dividers
• Maximum file size information (10 MB)
• Responsive design with flex layout