Cloudflare R2 Uploader

This is a demo application that allows users to upload files directly to a Cloudflare R2 bucket from their browser. This application also includes a support button for contributions.

IMPORTANT SECURITY WARNING: The current implementation exposes your R2 Access Key ID and Secret Access Key directly in the client-side code (via environment variables). This is highly insecure and should NEVER be used in a production environment. For production applications, you must implement a backend service to generate pre-signed URLs for uploads, ensuring your R2 credentials remain secure on the server. This client-side exposure is solely for learning and demonstration purposes.

Setup

To use the R2 Uploader, you need to configure the following environment variables in your .env file:

VITE_R2_ACCOUNT_ID="your_cloudflare_r2_account_id"
VITE_R2_BUCKET_NAME="your_r2_bucket_name"
VITE_R2_ACCESS_KEY_ID="your_r2_access_key_id"
VITE_R2_SECRET_ACCESS_KEY="your_r2_secret_access_key"

Replace the placeholder values with your actual Cloudflare R2 credentials.

Cloudflare R2 CORS Configuration:

For the client-side upload to work, you need to configure CORS (Cross-Origin Resource Sharing) on your Cloudflare R2 bucket. Here's an example JSON configuration you can use:

[
  {
    "AllowedOrigins": [
      "http://localhost:32100"
    ],
    "AllowedMethods": [
      "GET",
      "POST",
      "PUT",
      "DELETE",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "ETag"
    ]
  }
]

Remember to replace "http://localhost:32100" with the actual origin of your application when deploying to production.

Note for Public Access during Development: If you want to access the uploaded files publicly (e.g., view images directly in the browser) during development, you might need to enable the "Public Development URL" for your R2 bucket in the Cloudflare dashboard. This setting is typically found under your R2 bucket's settings.

Usage

1. Select a File: Click the "Select File" input and choose a file from your local system.
2. Randomize File Name: Check this option if you want the uploaded file to have a unique, randomly generated name instead of its original filename.
3. Upload: Click the "Upload to R2" button.
4. Status: A toast notification will appear, indicating the upload progress and result (success or failure).

The uploaded file will be stored in your specified R2 bucket with its original filename or a randomized name, depending on your selection.

Support Us Button

This application includes a "Support Us" button, allowing users to contribute via PayPal. The PayPal username is configured in the support.json file.

To change the PayPal username:

1. Open the support.json file in the root directory of the project.
2. Modify the paypalUsername value to your desired PayPal username:

   {
     "paypalUsername": "your_paypal_username_here"
   }

3. Save the file. The button will now link to your specified PayPal.me page.