Better Upload

Product Introduction

1. Better Upload is a React library that enables developers to implement secure, direct file uploads to any S3-compatible storage service with minimal configuration. It provides pre-built components like drag-and-drop interfaces and integrates seamlessly with modern React applications. The solution eliminates backend middleware by handling uploads directly between the client and storage services.
2. The core value lies in its ability to simplify complex S3 upload workflows while ensuring full data ownership for developers. It reduces infrastructure overhead by bypassing server-side processing and offers customizable UI components aligned with popular design systems like shadcn/ui.

Main Features

1. The library provides an <UploadDropzone> component with drag-and-drop functionality, file type validation, and real-time progress tracking, supporting up to 4 files (2MB each) for JPEG/PNG/GIF formats out of the box.
2. Developers can use the useUploadFiles hook to configure direct S3 connections via parameters like bucket routes, signed URL policies, and automatic MIME type detection through the accept="image/*" attribute.
3. Built-in integration with shadcn/ui components allows instant UI customization, including error states, loading animations, and user instructions, while maintaining compatibility with any React styling framework.

Problems Solved

1. It addresses the complexity of implementing secure S3 uploads in React applications that traditionally require custom backend APIs for generating pre-signed URLs and handling file processing.
2. The product targets frontend developers building applications requiring user-generated content uploads, such as SaaS platforms, content management systems, or internal tools.
3. Typical use cases include profile picture uploads, document submission portals, and media-rich applications where data ownership and reduced server costs are critical requirements.

Unique Advantages

1. Unlike alternatives requiring server-side file handling, Better Upload implements the AWS S3 POST policy system directly in the client, enabling true end-to-end encrypted uploads without intermediate servers.
2. The library introduces a dual control system where multiple uploaders can be managed through a centralized control prop, enabling complex forms with multiple file input sections.
3. Competitive advantages include zero dependencies on proprietary cloud services, automatic S3 policy generation for upload authorization, and built-in compliance with S3-compatible services like Cloudflare R2 or DigitalOcean Spaces.

Frequently Asked Questions (FAQ)

1. How do I configure my S3 bucket for direct uploads? The library requires CORS configuration on your bucket and an IAM policy granting s3:PutObject permissions, with detailed examples provided in the documentation for AWS, Cloudflare R2, and MinIO.
2. Can I use this with non-AWS S3 providers? Yes, it supports any S3-compatible service through customizable endpoint configuration in the useUploadFiles hook parameters.
3. How are file type restrictions enforced? Restrictions are applied at both client-side (via browser file picker filters) and server-side levels (through S3 policy conditions), preventing invalid uploads even if client checks are bypassed.
4. Is the UI customizable beyond shadcn/ui components? While optimized for shadcn/ui, all components expose className props and can be styled with CSS-in-JS libraries or traditional CSS frameworks.
5. What security measures prevent unauthorized uploads? Uploads require cryptographically signed POST policies generated server-side, with automatic expiration and strict bucket path restrictions configured through the library's route parameters.