R2up

Modern, browser-based tool for uploading files to Cloudflare R2 storage

Comment

R2up - Modern Cloudflare R2 File Uploader 🚀

🌐 Live Demo | 📖 Documentation | 🐛 Report Issues

📋 Table of Contents

🎯 Overview

R2up is a modern, browser-based tool designed specifically for uploading files to Cloudflare R2 storage. Unlike the Cloudflare R2 web interface which has a 300MB file size limit, R2up uses chunked uploads to handle files of any size. Built with React and TypeScript, it offers a beautiful, intuitive interface with advanced features like chunked uploads, progress tracking, and seamless drag-and-drop functionality.

Perfect for developers, content creators, and businesses who need a reliable, fast, and secure way to upload files to Cloudflare's S3-compatible R2 storage service.

🌟 Why Choose R2up?

  • 🚀 Bypasses 300MB Limit - Upload files larger than Cloudflare's web UI allows
  • 🆓 Completely Free - No subscription fees or hidden costs
  • 🔒 Secure & Private - All processing happens in your browser
  • ⚡ Lightning Fast - Optimized chunked uploads for maximum speed
  • 📱 Mobile Friendly - Works perfectly on all devices
  • 🎨 Beautiful UI - Modern design with smooth animations
  • 🛠️ Developer Friendly - Built with modern web technologies

✨ Key Features

Core Upload Features

  • Chunked Upload Technology - Split large files for reliable transfers
  • Real-time Progress Tracking - Monitor upload progress for each file
  • Drag & Drop Interface - Intuitive file selection and upload
  • Multiple File Support - Upload multiple files simultaneously
  • Pause & Resume - Control your uploads with pause/resume functionality
  • Smart Error Handling - Automatic retries and detailed error messages

User Experience

  • Modern Glass-morphism Design - Beautiful, contemporary interface
  • Dark Theme - Easy on the eyes with professional aesthetics
  • Responsive Layout - Perfect experience on desktop, tablet, and mobile
  • Smooth Animations - Powered by Framer Motion for fluid interactions
  • Toast Notifications - Instant feedback for all actions

Technical Features

  • S3-Compatible API - Works with Cloudflare R2's S3 interface
  • Client-Side Processing - No server required, runs entirely in browser
  • Local Storage Persistence - Remembers your settings and upload queue
  • CORS Configuration Help - Built-in guide for R2 bucket setup
  • Cross-Browser Compatibility - Works in all modern browsers

🚀 Quick Start

  1. Visit r2up.cloudwerx.dev
  2. Configure your Cloudflare R2 credentials
  3. Upload files with drag & drop or file browser
  4. Monitor progress and enjoy blazing-fast uploads!

📖 Setup Guide

1. Get Your Cloudflare R2 Credentials

  1. Log in to Cloudflare Dashboard
  2. Navigate to R2 Object Storage
  3. Note your Account ID (found in the right sidebar)
  4. Create an R2 Token with read/write permissions
  5. Create or select your R2 Bucket

2. Configure R2up

Enter your credentials in the Configuration section:

  • Account ID: Your Cloudflare account identifier
  • Access Key ID: From your R2 token
  • Secret Access Key: From your R2 token
  • Bucket Name: Your R2 bucket name
  • Chunk Size: Upload chunk size (5-10MB recommended)

3. Set Up CORS (Required)

Configure CORS for your R2 bucket to allow browser uploads:

[
  {
    "AllowedOrigins": ["http://localhost:5173", "https://r2up.cloudwerx.dev"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["Content-Length", "Access-Control-Allow-Origin", "Content-Type"],
    "MaxAgeSeconds": 3600
  }
]

4. Start Uploading!

  • Drag files into the upload area
  • Or click to browse and select files
  • Monitor progress in real-time
  • Files are uploaded directly to your R2 bucket

🌐 Browser Compatibility

R2up works in all modern browsers:

  • ✅ Chrome 90+ (Recommended)
  • ✅ Firefox 88+
  • ✅ Safari 14+
  • ✅ Edge 90+
  • ✅ Opera 76+

Mobile Support

  • ✅ iOS Safari 14+
  • ✅ Chrome Mobile 90+
  • ✅ Samsung Internet 13+

🛠️ Technical Stack

Frontend Framework

  • React 19.1.0 - Modern UI library
  • TypeScript 5.8.3 - Type-safe development
  • Vite 6.3.5 - Lightning-fast build tool

Styling & UI

  • TailwindCSS 4.1.7 - Utility-first CSS framework
  • Framer Motion 12.12.1 - Smooth animations
  • Heroicons 2.2.0 - Beautiful SVG icons
  • React Icons 5.5.0 - Icon library

Cloud & Storage

  • AWS SDK for JavaScript 3.815.0 - S3-compatible API client
  • Cloudflare R2 - S3-compatible object storage

Development Tools

  • ESLint 9.25.0 - Code linting
  • PostCSS 8.5.3 - CSS processing
  • Autoprefixer 10.4.21 - CSS vendor prefixes

🔧 Development

Prerequisites

  • Node.js 18+
  • npm 9+

Local Setup

# Clone the repository
git clone https://github.com/CLOUDWERX-DEV/cloudwerx-dev.git
cd R2up

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

R2up/
├── src/
│   ├── components/     # React components
│   ├── App.tsx        # Main app component
│   └── main.tsx       # Entry point
├── public/            # Static assets
├── dist/              # Production build
└── package.json       # Dependencies

🤝 Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

Development Guidelines

  • Follow TypeScript best practices
  • Use semantic commit messages
  • Add comments for complex logic
  • Test on multiple browsers
  • Update documentation

🔍 SEO & Discoverability

R2up is optimized for search engines with:

On-Page SEO

  • ✅ Semantic HTML structure
  • ✅ Optimized meta tags and descriptions
  • ✅ Open Graph tags for social sharing
  • ✅ Twitter Card integration
  • ✅ Structured data (JSON-LD)

Technical SEO

  • ✅ Fast loading times with Vite
  • ✅ Mobile-first responsive design
  • ✅ Progressive Web App features
  • ✅ Proper sitemap.xml
  • ✅ Robots.txt configuration

Search Keywords

  • Cloudflare R2 uploader
  • File upload tool
  • S3 compatible storage
  • Browser-based file manager
  • Chunked file upload
  • Cloudflare R2 client

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🏢 About CLOUDWERX LAB

R2up is developed and maintained by CLOUDWERX LAB - "Digital Food for the Analog Soul"

**Made with ❤️ by CLOUDWERX LAB** [🌐 Website](http://cloudwerx.dev) • [📧 Contact](mailto:sysop@cloudwerx.dev) • [🐙 GitHub](https://github.com/CLOUDWERX-DEV) ⭐ **Star this repo if R2up helped you!** ⭐
Share this project:

Updates