Cloudflare R2 File Upload

A React component for uploading files to Cloudflare R2, with support for single and multiple file uploads. Includes drag-and-drop functionality and integration with react-dropzone.

Meta

• [x] Create and publish the component
• [x] Add diferent styles
• [ ] Add customizable styles

Installation

Install the package via npm:

npm install @cloudflare/r2-file-upload

Add environment variables for your Cloudflare R2 API key and account ID:

VITE_AWS_ACCESS_KEY_ID=your_access_key_id
VITE_AWS_SECRET_ACCESS_KEY=your_secret_access_key
VITE_AWS_REGION=your_region # e.g. auto
VITE_AWS_ENDPOINT=your_endpoint # e.g. https://7361411401e98074.eu.r2.cloudflarestorage.com
VITE_AWS_BUCKET_NAME=your_bucket_name # e.g. test-bucket
VITE_IMG_DOMAIN=your_img_domain # e.g. https://lolo.com.com (this domain added in your R2 bucket settings for public access)

Props

| Option | Required | Default | Description | | --------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | | handleInputChange | Yes | | | | title | No | | subtitle | No | | choseTitle | Yes | | style | No | | acceptFileTypesText | Yes | | message | No | | type | No | | acceptedFileTypes | Yes | | changeImageName | No | false | If true, the file name will be changed to a random UUID. This is useful when you want to upload multiple files with the same name. |

Usage

Import the FileUpload component and use it in your React application:

import { FileUpload } from "@cloudflare/r2-file-upload";

function App() {

const [formData, setFormData] = useState<{ imageUrl: string[] }>({
    imageUrl: [],
  });

const handleInputChange = (urls: string[]) => {
    setFormData({ ...formData, imageUrl: urls });
  };

  return (
    <FileUpload
      handleInputChange={handleInputChange}
      title="Upload to Cloudflare R2 multiple"
      subtitle="Upload here"
      choseTitle="Attach File"
      style="simple"
      acceptFileTypesText="image, pdf, doc, txt, docx no more than 10MB"
      message="Drag and drop the file you want to upload"
      type="multiple"
      acceptedFileTypes={[
        "image/*",
        "application/pdf",
        ".doc",
        ".txt",
        ".docx",
      ]}
    />
  );
}

Explanation:

1. Installation: Instructions on how to install the component.
2. Usage: Examples showing how to use the component for single and multiple file uploads.
3. Props: Detailed explanation of the props accepted by the FileUpload component.
4. Environment Variables: Description of the required environment variables for configuring the component.
5. Features: List of features supported by the component.
6. License: License information for the component.

This README should provide a comprehensive guide for users to understand and use your file upload component.