Transform URL Shorten Worker into R2 File Storage

Github

https://github.com/crazypeace/Url-Shorten-Worker

Transform into a File Storage Save to R2 Object Storage

First, a demo video

Apply for a Cloudflare account, skipped.

* During the following operations, the colored information, you'd better write it down separately. This way the operation process will be smoother.

Create R2

Remember the name of this R2, take r2test as an example

Set up public link

Remember this R2 public link, https://pub-*****.r2.dev

Set CORS Policy

[

{

"AllowedOrigins": [

"*"

"AllowedMethods": [

"PUT",

"GET",

"HEAD",

"DELETE"

"AllowedHeaders": [

"*"

]

}

]

* Note, to be honest, it's a little rough here, but no big deal.

Create R2 API

Go back to the R2 overview page, remember this Account ID

Click the Manage button

Click the "Create User API token" button

Select "Object Read & Write" - "Specify bucket(s)" - Select the R2 you just created r2test

Remember the generated Access Key ID, Secret Access Key

Create KV

Remember the name of this KV, using kvtest as an example

Create Worker Service

Set Up KV Binding

The variable name must be set to LINKS, and the KV name is the one you just created: kvtest

* LINKS is referenced in the script, so it must be set.

Edit the Worker's script content

Delete all the existing content

Replace it with the content from: https://github.com/crazypeace/Url-Shorten-Worker/blob/main/worker.js

Transform into File Storage lite

Modify:

password: "suibianshezhishenme", // Set any password you like

theme: "theme/file-r2-lite", // Transform into File Storage lite

Set 5 variables:

R2_ACCOUNT_ID = "Account ID" // - R2 Account ID (plaintext variable)

R2_ACCESS_KEY_ID = "Access Key ID" // - S3 API Access Key ID (recommended to set as encrypted Secret)

R2_SECRET_ACCESS_KEY = "Secret Access Key" // - S3 API Secret Access Key (recommended to set as encrypted Secret)

R2_BUCKET_NAME = "r2test" // - R2 bucket name (plaintext variable)

R2_PUBLIC_URL = "https://pub-*****.r2.dev" // - R2 public access URL, e.g. https://pub-xxxx.r2.dev (plaintext variable)

Save and Deploy

Top right corner

Start using File Storage lite

Access your worker domain with a browser, or click the visit link

Showing 404 is normal behavior, a password is set and it's not public.

Add the password as a path after the worker domain, e.g.

https://divine-voice-e752.crazypeace.workers.dev/suibianshezhishenme

At this point the interface will display normally

For the specific operations, you can watch the demo video

* Considering that the files stored in the file hosting site may be quite large, images are not displayed by default; you need to click the preview button to view the image.

Transform into a file hosting site (complete form)

Considering that the files in R2 may be large in size, and we only want to display small-sized thumbnails in the admin panel.

Then we can take advantage of Cloudflare's Image Transformation feature for free.

First, you need to have a domain hosted on Cloudflare.

Enable the Image Transformation feature

Set up a custom domain for R2

Do you remember this page?

Enter a subdomain of your domain. For example, r2test.xxxx.xxxx

After a while, it will look like this, indicating that it has taken effect.

Modify the worker script

Modify the value of R2_PUBLIC_URL

R2_PUBLIC_URL = "https://r2test.xxxx.xxxx"

Modify

theme: "theme/file-r2", // File Storage Station (Complete Version)

Save and Deploy

Top-right corner

Start using the File Storage Station (Complete Version)

Use a browser to visit your-worker-domain/your-password, for example

https://divine-voice-e752.crazypeace.workers.dev/suibianshezhishenme

You will find that image thumbnails are automatically displayed

======

Postscript

Click the "Upload to R2" button once, and then click the "Save KV" button once. It is indeed too tedious.

But, considering the "heritage" of the entire Url-Shorten-Worker series, I did not make further optimizations.

In the future, I will create a new repo to achieve further optimization and enhanced development.

======

The role of configuration parameters

const config = {

password: "", // Password for the management panel
result_page: false, // Whether to use a specific result page to display value
theme: "", // The theme of the management panel
cors: true, // Whether to allow CORS for the API
unique_link: false, // Whether a long link has only a unique short link (will increase write usage)
custom_link: true, // Allow custom short links

overwrite_kv: false, // Allow overwriting existing keys
snapchat_mode: false, // Short link can only be accessed once (deleted after access)
visit_count: true, // Enable counting (will greatly increase write usage, not recommended for multi-user)
load_kv: false, // Load all data from KV (recommended for personal use, multi-user will see others' data)
system_type: "shorturl", // System function definition // shorturl, imghost, other types {pastebin, journal}
}

======

If used as a PasteBin

Demo site https://pastebin.crazypeace.workers.dev/tieludasiliqiuweiyue

Demo video https://www.youtube.com/watch?v=toBeb3DNpZc