Upload images to Cloudflare R2 with uPic
Upload images to Cloudflare R2 with uPic
Since uPic hasn't been updated for several years, I decided to use uPic's custom uploader feature to implement custom upload interfaces in order to add other image hosting services. You can easily add any image hosting service you want.
Cloudflare R2
You can upload images to Cloudflare R2 via uPic, using your own domain name.
Create New Bucket
- Go to Cloudflare Dashboard
- Click "R2 Object Storage" => "+Create bucket"
- Set
Bucket name, the other options can be left as default - Click "Create bucket"
- Settings => Public access => Custom Domains
- Click "Connect Domain" and set your domain, e.g.,
img.example.com
Get Access Key
R2 Object Storage => " API" Button => "Use R2 with APIs" => "Create an API token"
Permissions Should be "Object Read & Write", and the others you could remain to default.
Copy the API Keys for the subsequent configuration.
- Access Key ID
- Secret Access Key
- Use jurisdiction-specific endpoints for S3 clients, typically
https://<AccountID>.r2.cloudflarestorage.com
Configure uPic
First Step: Add Custom Uploaders
- Preferences > Click "+" to add a Custom Uploaders
into uPic Custom Uploader Configuration.
| Field | Value | Description |
|---|---|---|
| API URL | https://upic.netcup.gifts/cloudflare-r2 | API URL |
| File Field | file | |
| URL Path | [data] | |
| Domain | https://img.example.com | Your domain, starts with https:// e.g.,https://img.example.com |
| Save Key | blog/{year}{month}/{filename}{.suffix} | The path you want to set |
Second Step: Add other fields
| Header Field | CloudFlare Name | Example Value |
|---|---|---|
bucket | Bucket Name | netcup |
accessKeyId | Access Key ID | 6713dae**********7b62ec |
secretAccessKey | Secret Access Key | 1ca5d39b***********bcc |
endpoint | Use jurisdiction-specific endpoints for S3 clients | https://d8a6e1ec6********9c358e1eb.r2.cloudflarestorage.com |
filename | {saveKey} |
Click Validate, and if configured correctly, you'll see a URL in your clipboard. When opened, it should display the uPic icon:
This means the configuration is successful! 🎉