#What is Better Upload?

Better Upload is a free, open-source React library designed to simplify file uploads to any S3-compatible storage service with minimal configuration. Its primary goal is to provide developers with a lightweight, accessible solution for handling uploads in web applications, targeting React developers building modern apps like SaaS platforms, e-commerce sites, or content management systems. Built with React, TypeScript, Tailwind CSS, and shadcn/ui, Better Upload uses a useUploadFiles hook for client-side management and a createUploadRouteHandler for server-side routing. It emphasizes direct uploads to your S3 bucket for full data ownership, avoiding third-party intermediaries. Components like UploadDropzone support drag-and-drop, file type/size validation, and easy integration with shadcn/ui for beautiful, responsive UIs. For shadcn/ui users, Better Upload is a perfect fit, leveraging shadcn/ui's accessible foundation to deliver optimized, production-ready upload experiences.

#Features ⚡️

• Drag-and-Drop Uploads: Intuitive UploadDropzone component for easy file selection.

• shadcn/ui Integration: Uses shadcn/ui components for accessible, customizable UI.

• Accessibility: WAI-ARIA-compliant with screen reader and keyboard support.

• CLI Support: Copy-paste code with shadcn/ui CLI for quick integration.

• Responsive Design: Tailwind CSS ensures uploads adapt to all screen sizes.

• Type Safety: TypeScript ensures robust, error-free development.

#Pros ✅

• Minimal Setup: Upload to S3 in minutes with simple hook and router configuration.

• Free and Open-Source: MIT license allows unrestricted use and modification.

• shadcn UI Fit: Perfect for shadcn UI with React and Tailwind foundation.

• Data Ownership: Direct S3 uploads keep control over your files.

• Easy Integration: Copy-paste model with CLI simplifies adding components.

#Cons ⚠️

• React Dependency: Limited to React projects, though fitting for shadcn UI.

• Setup Complexity: Requires S3-compatible service and server-side routing.

• Performance Overhead: Large file uploads may impact user experience.

• Learning Curve: Familiarity with shadcn UI, React, and TypeScript needed.

#Included Components - Templates

Better Upload includes a variety of shadcn/ui-powered upload components:

• UploadDropzone: Drag-and-drop zone with file preview and validation.

• useUploadFiles Hook: Client-side file management with control state.

• createUploadRouteHandler: Server-side API for S3-compatible uploads.

• File Validation: Built-in support for max files, size, and types.

#Pricing 💸

Better Upload operates on a Free model:

• Free Access: All components and features free under MIT license.

• No Pro Version: No premium tiers or paid features.

#Integrations 🧰

Better Upload integrates with:

• React: Core framework for hook and component implementation.

• shadcn UI: Accessible component library for styling and structure.

• Tailwind CSS: Utility-first styling for responsive design.

• TypeScript: Ensures type-safe file handling.

• S3-Compatible Services: AWS S3, MinIO, or Cloudflare R2 for storage.

• Next.js: API route handler for server-side upload processing.