Shadcn Dropzone

Shadcn Style Dropzone: Accessible File Uploads for React

This component offers a fully accessible dropzone solution designed in the Shadcn/UI style, leveraging the power of the useDropzone hook from react-dropzone. It builds upon Shadcn primitives to provide a seamless and familiar developer experience for implementing file upload functionality in React applications. The component aims to simplify the integration of drag-and-drop file inputs while maintaining high accessibility standards and a clean aesthetic.

Features:

• react-dropzone Integration: Utilizes the useDropzone hook for robust drag-and-drop functionality.
• Shadcn UI Styling: Adheres to Shadcn UI design principles and primitives for a consistent look and feel.
• Accessibility Prioritized: Developed with a strong focus on accessibility standards.
• Composable Architecture: Offers modular components like DropZoneArea, DropzoneTrigger, and DropzoneFileList for flexible implementation.
• File List Display: Includes DropzoneFileListItem to manage and display individual file statuses.
• User Feedback Mechanisms: Provides DropzoneMessage and DropzoneFileMessage for clear communication.
• File Management Actions: Features DropzoneRemoveFile and DropzoneRetryFile for user control over uploads.
• Upload Progress Indication: Integrates InfiniteProgress to visually represent file upload status.
• Single and Multiple File Uploads: Supports both single and multiple file selection modes.
• Image Preview Support: Capable of displaying previews for selected image files.
• Click and Drag-and-Drop: Allows file selection through both clicking and dragging files into the dropzone.

Summary:

This Shadcn-style dropzone component simplifies adding rich file upload capabilities to React applications. It combines the robustness of react-dropzone with the aesthetic and accessibility of Shadcn UI, offering developers a pre-built, customizable solution for handling single or multiple file uploads, including image previews and file status management. It's designed for easy integration and a consistent user experience.