Improve Cloudflare R2 web uploader as Alist's image bed alternative

Posted on In Word count in article: 396

Cloudflare’s R2 storage is ideal image bed for blog writing, unless we can setup a proper pipline for uploading local image files. In the past, I’ll make use of Alist, a fantastic file list program that support multiple storage management through webui, to do the uploading and link generating. With the help of Meta function, I can place a simple link panel under image detail page. And direct link with image size parameter can be used to specify aspect-ratio to avoid layout shake.

1-click link copy

This indeed do the job, but the defects are obvious. I have to open each image’s detail page to copy to code, but this can’t be achived by open in new tab from file list page. So, The job become inefficient cycle involve forward to image page 👉 click to copy 👉 back to list page 👉 sort by date twice. And, The image can’t be previewed until I navigate to the detail page.

So I’m seeking for a more dedicated tool to do the job, and cloudflare service is prefered. Finally, r2-image-worker
and r2-uploader meet the needs. But the former one is designed for api usage or shortcut on MacOS. The second one is more powerful, that use cf worker as backend and cf page as frontend. After days of efforts, I made some improvement to make it more practical.

  • deploy automatically by github actions
  • image preview before uploading
  • add direct link with dimension parameter
  • add privew link based on workers endpoint
  • disable file list of whole R2
  • show finished files
  • able to select skip/rename/overwrite files with same name on server
  • drag and drop image files
  • rename or delete files after uploaded
  • retrieve last 10 files from remote
  • bug fix

The new pipline is summarized in the UML sequence diagram:

UML sequence diagram

And the imporvements of UI demos like this:

Except uploading from local files, screen capture followed by Ctrl+V on the web page is allowed. By the way, the auto refresh of file list on page load and file selected is omitted, since the files I hosted on R2 is a bit long, loading them all will take long time and eat memories. If you’re interest, feel free to check the forked repository, PR is welcomed😀