# 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:

```bash
npm install @cloudflare/r2-file-upload
```

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

```bash
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:

```jsx
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.