The project comes from GitHub
Currently has 1.6k Fork and 1.1k Star
You can refer to the README.md of the project for operation, or refer to the operation of this post
Preparation
- A GitHub account
Not required - A Cloudflare account
- A domain name that has been hosted on Cloudflare
Not hosted is also acceptable
Open GitHub and log in, find the project, or click the link above
Click Fork
Create fork directly
Then go to Cloudflare and click Workers and Pages
Click Create Application in the right area
Click pages, then click connect to git, authorize
Select the project that was just forked, click start setting
No need to make any changes, click save and deploy
If you don't have a GitHub account, you can download it and choose Create by direct upload below, and the subsequent deployment is the same
After the deployment is completed, go back to Workers and Pages
You will find that there is an additional project on the right side, and an .pages.dev domain name is automatically assigned
This domain name has been tested and cannot be opened without a proxy
So you need to customize the domain name
Click on the project name, enter and click on custom domain, click on setting custom domain below
Enter your own domain name and click continue
If the domain name is hosted on Cloudflare, it will automatically help you add DNS, and then click activate domain
If it is hosted elsewhere, you need to manually add it according to the prompts. After adding, click activate domain
After completion, wait for the domain name to take effect
Visit the custom domain
Try uploading an image
If an error occurs, just upload it again
Click the button on the right to copy the path, and click the red return button on the right to return to the upload interface
At this time, someone will say, what should I do if I want to use the image I uploaded earlier, but I don't have the saved path?
Go back to Cloudflare, click KV
Click create namespace
Name it yourself, click add
Click the function in the project settings
Scroll down and find this
Set the variable name to img_url, fill in the KV space you just set, and click save
Go back to the project, click the three dots on the right side of the latest deployment, and select redeploy
Open the custom domain/admin
During testing, it was found that you need to access it after uploading the image in order to display it in the admin interface. I don't know if it's because of my slow internet speed or a bug, or if it's designed that way
There is an admin interface, but there is no password set, which is somewhat insecure because the image link is exposed and others may find the management address
Go back to the project, go to settings>environment variables>edit variables, add username BASIC_USER and password BASIC_PASS
After saving, redeploy it
Then go to the management interface, enter the login account and password set just now to log in
The official documentation also mentions other login methods
Of course, you can also not set these two values, so that when accessing the backend management page, no verification is required and the login step is skipped. This design allows you to use Cloudflare Access to implement functions such as email verification code login, Microsoft account login, GitHub account login, etc., which can be integrated with the login methods on your domain name, without having to remember another set of backend account passwords. To add Cloudflare Access, please refer to the official documentation, and note that you need to protect the paths including /admin and /api/manage/*
According to the documentation, image review can also be enabled, but I haven't tried it. If you are interested, you can try it yourself
Limitations
- Due to the actual storage of image files in Telegraph, Telegraph limits the maximum size of uploaded images to 5MB
- Due to the use of Cloudflare's network, the loading speed of images may not be guaranteed in some regions
- The free version of Cloudflare Function limits 100,000 requests per day (i.e., the total number of times images are uploaded or loaded cannot exceed 100,000). If exceeded, you may need to choose to purchase a paid plan for Cloudflare Function. If the image management function is enabled, there will also be limitations on the number of KV operations. If exceeded, you need to purchase a paid plan.
- Cloudflare KV has a free daily write quota of 1,000 times. Each new image loaded will consume this write quota. If exceeded, the image management interface will not be able to record newly loaded images.
- Up to 100,000 free read operations per day, each time an image is loaded will consume this quota (in the case of no cache, if your domain name has caching enabled in Cloudflare, it will only consume this quota when the cache is missed). If exceeded, features such as blacklisting and whitelisting may fail.
- Up to 1,000 free delete operations per day, each image record will consume this quota. If exceeded, the image record cannot be deleted.
- Up to 1,000 free list operations per day, each time the /admin page is opened or refreshed will consume this quota. If exceeded, the backend image management will be performed.
- In most cases, this free quota is generally sufficient and can be slightly exceeded. It is not necessary to immediately disable it if it exceeds the quota. Each quota is calculated separately. If one operation exceeds the free quota, only that operation will be disabled without affecting other functions. Even if my free write quota is used up, my read and write functions are not affected. The images can still be loaded normally, but I just can't see the new images in the image management interface.
- If your free quota is not enough, you can purchase the paid version of Cloudflare Workers from Cloudflare yourself, starting at $5 per month, and charged based on usage, without the above quota limitations.
- In addition, the changes made to the environment variables will take effect during the next deployment. If you change the environment variables and enable or disable a certain function, please remember to redeploy.