The speedup cloudflare R2 (and soon KV) needed.

Getting Started

Don't wanna deal with all this? We got you covered.

Fully hosted version with authentication and a database (thanks to a Neon Postgres Integration)

NOTE: If deploying on vercel your static file upload limit is 100MB for Hobby accounts and 1GB for Pro accounts. https://vercel.com/docs/limits#static-file-uploads

Environment Setup (this is no longer needed in the new version that uses the one touch setup)

1. Copy the example environment file to create your local environment file:

cp .env.example .env.local

1.5. Getting Cloudflare Variables:

Click "Manage API Tokens"

Click "Create API Token"

Make sure the API token you create has ADMIN READ AND WRITE, otherwise you will not be able to list/create/edit and delete buckets.

Token Value -> CLOUDFLARE_API_TOKEN Access Key ID -> CLOUDFLARE_ACCESS_KEY_ID Secret Access Key -> CLOUDFLARE_SECRET_ACCESS_KEY

Click "Finish"

Click "← R2"

Then click "API" -> "Use R2 with APIs"

Account ID -> CLOUDFLARE_ACCOUNT_ID S3 Compatable API Endpoint -> CLOUDFLARE_R2_ENDPOINT

2. Fill in the environment variables in .env.local:

• CLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID (found in the Cloudflare dashboard URL)
• CLOUDFLARE_ACCESS_KEY_ID: R2 access key ID (generate in Cloudflare R2 dashboard → "Manage R2 API Tokens")
• CLOUDFLARE_SECRET_ACCESS_KEY: R2 secret access key (shown when generating the token above)
• CLOUDFLARE_API_TOKEN: API token with R2 permissions (create in Cloudflare dashboard → "My Profile" → "API Tokens")
• CLOUDFLARE_R2_ENDPOINT: Your R2 endpoint URL (format: https://<ACCOUNT_ID>.r2.cloudflarestorage.com)

Running the Development Server

First, run the development server:

bun i

bun dev

Open http://localhost:3000 with your browser to see the result. It will take a few seconds to load the first time & properly load/cache the data. It will show all of your buckets and the files within them.

Key Features

1. Infinite Smooth Scrolling

• Virtualized list for large bucket contents with minimal memory usage
• Early fetch triggers (starts loading 1000px before reaching the bottom)
• Smooth animations for loading states
• Scroll position maintenance when navigating
• Automatic pagination handling with continuation tokens

2. Advanced Search & Filtering

• Smart search syntax with prefix and filename components
• Powerful query syntax with operators:
  • type:image - Filter by file type (image, document, code, media, archive)
  • size>1mb - Files larger than 1MB
  • size<1gb - Files smaller than 1GB
  • after:2024-01-01 - Files modified after date
  • before:2024-12-31 - Files modified before date
• Combined server-side and client-side filtering for optimal performance
• Real-time result updating as you type

3. Interactive File Preview System

• Hover preview for images directly in the file list
• Automatic file type detection with appropriate previews
• Thumbnail generation for quick visual browsing
• Optimized loading with lazy-loading and caching
• Contextual controls based on file type

4. Advanced Drag & Drop File Upload

• Intuitive drag & drop interface with visual feedback
• Multi-file upload support
• Real-time progress tracking with elegant progress bars
• Configurable parallel uploads (1-10 concurrent uploads)
• Automatic folder path handling
• Upload cancellation support
• Error handling with retry functionality

5. React Query Data Management

• Efficient data caching reduces API calls
• Real-time data with optimistic updates
• Prefetching of likely-to-be-needed data
• Background data refreshing
• Queryable and filterable data store

6. Smooth Animations & Transitions

• Framer Motion powered animations
• Micro-interactions for better user feedback
• Loading states with smooth transitions
• Interactive element animations
• Optimized for performance

Known Issues

1. On file upload there is a react-hook-form error that prevents immediate file list reload, we are working on this.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

SECURITY AND AUTHENTICATION WARNING:

CURRENTLY THERE IS NO AUTHENTICATION ON THIS APP. ANYONE WITH ACCESS TO THE URL OF THIS APP CAN VIEW AND EDIT ALL OF YOUR BUCKETS AND FILES. ONLY USE THIS APP ON A PRIVATE NETWORK IF YOU ARE OK WITH THIS. WE ARE NOT RESPONSIBLE FOR ANY DATA LOSS OR LEAKAGE.

License

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