https://github.com/learexx/r2-bucket-uploader
Cloudflare R2 multipart File Uploader to bucket, Demo example for NextJS 15
https://github.com/learexx/r2-bucket-uploader
blob-storage chunked-uploads cloudflare file-upload multipart multipart-uploads nextjs nextjs15 object-storage s3 upload-api
Last synced: 3 months ago
JSON representation
Cloudflare R2 multipart File Uploader to bucket, Demo example for NextJS 15
- Host: GitHub
- URL: https://github.com/learexx/r2-bucket-uploader
- Owner: LeaReXx
- License: mit
- Created: 2025-02-19T09:23:36.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-02-22T20:18:04.000Z (3 months ago)
- Last Synced: 2025-02-22T20:25:26.808Z (3 months ago)
- Topics: blob-storage, chunked-uploads, cloudflare, file-upload, multipart, multipart-uploads, nextjs, nextjs15, object-storage, s3, upload-api
- Language: TypeScript
- Homepage:
- Size: 5.24 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cloudflare R2 bucket Multipart File Uploader Next JS 15
A minimal and flexible uploader component tailored for Cloudflare R2 bucket. It supports multipart upload and was tested with files up to 1 GB size.
- R2 blob storage support (or any S3 API compatible storage)
- Tested with 1GB files
- Drag and drop
- Completely server side
- Multipart upload support
- Customizable
- No Complexity
- Built With NextJs 15
The intent of this repo is to provide simple to use and simple to copy and paste file uploader component for Next.js.
The components were written mainly to be used with R2 but any blob storage with a S3-compatible API should work with just a few tweaks.
Good for simple projects or for bootstrapping more complex file-uploading workflows when customized.
# Setup
### Install the dependencies
On your project, run:
```bash
npm install
```
### Set the environment variables
In your `.env` file, set the following environment variables:
```bash
R2_ENDPOINT=
R2_ACCESS_KEY=
R2_SECRET_KEY=
R2_BUCKET_NAME=
```
The values should be available from the R2 management dashboard on Cloudflare.
### Set the CORS settings for the R2 bucket
Create the following CORS settings in order to make the upload components work with your bucket:
```json
[
{
"AllowedOrigins": ["*"],
"AllowedMethods": ["GET", "PUT"],
"AllowedHeaders": ["Authorization", "content-type"],
"ExposeHeaders": ["ETag", "Location"],
"MaxAgeSeconds": 3000
},
{
"AllowedOrigins": ["*"],
"AllowedMethods": ["GET"],
"AllowedHeaders": ["*"]
}
]
```
Optionally, to increase security you can also customize the `AllowedOrigins` properties.
### Run
Run the development server
```bash
npm run dev
```