Shadcn File Upload

Enhanced File Uploads for shadcn/ui with a Customizable React Component

Facilitate intuitive file handling in your shadcn/ui applications with shadcn-file-upload, a React component. It integrates react-dropzone for robust drag-and-drop functionality. This tool offers developers significant flexibility, including distinct layout modes (vertical or horizontal), options for single or batch file submissions, and extensive customization for display text, icons, permissible file types, and size constraints, all while maintaining visual harmony with your shadcn/ui theme.

Features:

• Drag and Drop Functionality: Enables intuitive file selection through dragging files onto the component or by a traditional click-to-select dialog, powered by react-dropzone.
• Layout Modes: Offers 'vertical' and 'horizontal' orientations to suit different UI designs and content flows.
• Upload Modes: Supports both 'single' file submission for individual uploads and 'multi' file submission for uploading multiple files at once.
• Customizable Interface: Allows developers to modify the defaultText and accompanying icons to align with application branding and context.
• File Validation: Provides options to define acceptedFileTypes (MIME types and extensions) and maxSize (in bytes) for uploaded files.
• shadcn/ui Integration: Built to seamlessly blend with shadcn/ui projects, utilizing Tailwind CSS for consistent and adaptable styling.
• Responsive Behavior: Designed to adjust its appearance and functionality effectively across various device screen sizes.
• onFilesUploaded Callback: A crucial prop that executes a function when files are selected or removed, returning the current file(s) or null.

Summary:

shadcn-file-upload delivers a complete file input mechanism for React developers, particularly those leveraging the shadcn/ui ecosystem. By merging react-dropzone's drag-and-drop capabilities with shadcn/ui's design principles, it offers a highly adaptable component. Users can configure layouts, upload behaviors, file validation rules, and visual elements, streamlining the development of sophisticated and user-friendly file upload interfaces within their applications.