File Uploader

Advanced File Uploader with Next.js, shadcn/ui, and React Dropzone

This project offers a robust file uploading solution built on the T3 stack, leveraging Next.js for the framework, Tailwind CSS for styling, and shadcn/ui for UI components. It integrates react-dropzone for seamless drag-and-drop functionality and UploadThing for backend storage. It's designed to be a modern, reusable component for developers looking to implement file uploads with progress indicators and form integration efficiently.

Features:

• Reusable useFileUpload Hook: Facilitates file uploads using UploadThing, enhancing reusability.
• Drag and Drop Interface: Enables intuitive file selection powered by react-dropzone for a better user experience.
• Upload Progress Bar: Provides visual feedback on the status of file uploads, keeping users informed.
• React Hook Form Integration: Works seamlessly with react-hook-form and shadcn/ui form elements for easy form handling.
• File Dialog Management: Demonstrates adding and removing files within a scrollable list for user control.
• Configurable File Limits: Allows setting restrictions on maximum file count and individual file sizes as per requirements.
• Click-to-Browse Option: Offers a traditional file browser selection method as an alternative to drag and drop.
• Uploaded Files Display: Shows a list of files that have been successfully uploaded, confirming completion.
• shadcn/ui Component Usage: Built with modern and customizable UI components from shadcn/ui for a sleek interface.
• UploadThing Storage Integration: Utilizes UploadThing for managing backend file storage effectively.
• Zod Validation: Employs Zod for robust data validation before processing.

Summary:

This file uploader provides a complete solution for developers using Next.js and shadcn/ui, offering a drag-and-drop interface, progress tracking, and integration with react-hook-form. It utilizes UploadThing for storage and Zod for validation, making it a well-structured and feature-rich component for adding file upload capabilities to web applications. It's bootstrapped with create-t3-app, ensuring a solid and modern foundation for projects.