Telegraph-Image Free Self-Built Image Hosting Adds Backend Image Management...#
Updated on January 19, 2023, 1:51 AM: The previously released code had a basic logical error due to my poor mental state from staying up late. It should have been if (check if the kv environment variable is set), then (write the image into kv storage when the image is first loaded). However, I don’t know if my brain short-circuited yesterday or what, but I wrote the if condition incorrectly, stating if (if the kv environment variable is not set), then (write the image into kv storage when the image is first loaded). Clearly, if the kv environment variable is not set, it is impossible to successfully write to kv storage, leading to some users experiencing: Error 1101 Worker threw exception. Although those who set the kv environment variable had the program running normally, the backend management could not record images because the program would not execute the write operation. I sincerely apologize for the inconvenience caused to everyone. The issue should now be fixed, and I kindly ask everyone to deploy the latest version of the code. I also appreciate the feedback from @雾山 @mikj521 @那山很优雅 @3514088137 @hiing @telnetpig @mourner and others. After several nights of continuous work, I was physically unable to continue yesterday, so I went to sleep and couldn’t respond in time. Sorry!
I previously mentioned that I would update the image management feature if there were over 500 stars on GitHub. I initially thought that a small image hosting program could never reach 500 stars, but I didn’t expect everyone to be so enthusiastic. In just a few months, it quickly surpassed 600+ stars. Since I promised to do it, I had no choice but to push through and write the image management feature.
Although I encountered many difficulties during the development process, it took much more time than I anticipated, and the release was delayed repeatedly. After several nights of hard work, I finally managed to release this update before the Spring Festival. I would like to wish everyone a Happy Spring Festival in advance! May you achieve your wishes in the new year!
Without further ado, here’s the code:
For those who have not deployed before, simply fork this repository to deploy it in the Cloudflare Pages backend.
Now, let’s introduce the main content of this update:
1. The long-awaited image management feature is disabled by default. To enable it, please go to the backend after deployment and click “Settings” -> “Functions” -> "KV Namespace Binding" -> “Edit Binding” -> fill in "Variable Name": img_url and select your pre-created KV storage space. After enabling it, access http(s)://your-domain/admin to open the backend management page.
(For how to create a KV storage space, please refer to: https://github.com/xyTom/Url-Shorten-Worker/#%E5%8E%BBworkers-kv%E4%B8%AD%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4)
2. The backend management page has a new login verification feature, which is also disabled by default. To enable it, please go to the backend after deployment and click “Settings” -> “Environment Variables” -> "Define Variables for Production Environment" -> “Edit Variables”.
“Variable Name” “Value”
BASIC_USER =
BASIC_PASS =
Of course, you can also choose not to set these two values, in which case you will not need verification when accessing the backend management page, skipping the login step. This design allows you to integrate with Cloudflare Access, enabling email verification login, Microsoft account login, GitHub account login, etc., allowing you to integrate with your existing login methods on your domain without needing to remember an additional set of backend account passwords. For adding Cloudflare Access, please refer to the official documentation, and feel free to share tutorials. Note that you need to protect paths including /admin and /api/manage/*.
- New total image count statistics
When the image management feature is enabled, you can view the number of images recorded at the top of the backend.
- New image filename search
When the image management feature is enabled, you can use the image filename in the backend search box to quickly locate the images you need to manage.
- New image status display
When the image management feature is enabled, you can view the current status of the images in the backend { "ListType": "None", "TimeStamp": 1673984678274 }
ListType indicates whether the image is currently in the blacklist or whitelist. None means it is in neither, White means it is in the whitelist, and Block means it is in the blacklist. TimeStamp is the timestamp of when the image was first loaded. If the image review API is enabled, the review results will also be displayed here with a Label.
- New blacklist feature
When the image management feature is enabled, you can manually add images to the blacklist in the backend. Images added to the blacklist will not load **normally.
- New whitelist feature
When the image management feature is enabled, you can manually add images to the whitelist in the backend. Images added to the whitelist will load normally regardless of the image review API results.
- New record deletion feature
When the image management feature is enabled, you can manually delete image records in the backend, which will no longer display that image in the backend unless someone uploads and loads that image again. Note that since the images are stored on Telegraph's servers, we cannot delete the original uploaded images; we can only block the loading of images through the blacklist feature mentioned in point 6.
- New program running mode: whitelist mode
When the image management feature is enabled, in addition to the default mode, this update also introduces a new running mode where only images added to the whitelist will be loaded. Uploaded images must be approved before they can be displayed, maximizing the prevention of inappropriate images from loading. To enable it, set the environment variable: WhiteList_Mode=="true".
- New backend image preview feature
When the image management feature is enabled, you can preview images loaded through your domain in the backend. You can click on the images to zoom in, zoom out, rotate, and perform other operations.
This update includes a lot of content and can be considered a major update. The entire backend code of the program has been almost completely rewritten, and it took quite a bit of time. I hope everyone finds it useful. Given that I’ve been burning the midnight oil for so long, could you help me by giving a free star on GitHub? You can also help promote it and share it with more people. Thank you very much!
For those who have already deployed, how to update?
Actually, updating is very simple. Just refer to the update content above, first go to the Cloudflare Pages backend, set up the necessary environment variables in advance, and bind them to the KV namespace. Then go to the GitHub repository you previously forked and select “Sync fork" -> "Update branch”. After a while, Cloudflare Pages will detect that your repository has been updated and will automatically deploy the latest code.
Some notes:
Cloudflare KV has a daily free write limit of 1000 times. Each new image loaded will consume this write quota. If the limit is exceeded, the image management backend will not be able to record new loaded images.
There is a maximum of 100,000 free read operations per day. Each time an image is loaded, it will consume this quota (in the absence of caching; if your domain has caching enabled on Cloudflare, it will only consume this quota when the cache is not hit). Exceeding this limit may cause features like black and white lists to fail.
There is a maximum of 1,000 free delete operations per day. Each image record will consume this quota, and exceeding it will prevent the deletion of image records.
There is a maximum of 1,000 free list operations per day. Each time the backend /admin is opened or refreshed, it will consume this quota. Exceeding it will lead to backend image management issues.
In most cases, this free quota is generally sufficient and can be slightly exceeded. It does not immediately stop service when the limit is exceeded, and each quota is calculated separately. If one operation exceeds the free quota, only that operation will be disabled, not affecting other functionalities. Even if my free write quota runs out, my read and write functionalities will not be affected, and images can still load normally; it’s just that new images will not be visible in the image management backend.
If you feel that the free quota is insufficient, you can purchase the paid version of Cloudflare Workers from Cloudflare, starting at $5 per month, with pay-as-you-go pricing and no such quota limits (why do I feel like I’m advertising for Cloudflare? Cloudflare, hurry up and pay me for the advertisement /doge manual dog head).
The conclusions drawn from the above notes are based on several days of repeated testing and should generally hold true, but there is no guarantee that Cloudflare will not suddenly change related policies in the future. Additionally, all features released in this update have undergone multiple rounds of testing. If you encounter bugs during use, it is likely due to Cloudflare or browser caching. You can try clearing the cache first. Also, changes made to environment variables will take effect during the next deployment, so please remember to redeploy if you change environment variables.
If you’ve tried clearing the cache and redeploying but still have issues, you can report them by opening an issue on GitHub. Given that this update includes many features, my personal skills and time are limited. Although I have conducted repeated testing, it is still difficult to test every feature and every scenario, so bugs are inevitable. Being able to release before the New Year as a gift for everyone is already quite an achievement for me. I encountered many difficulties during the development process and often thought about giving up. However, thinking about the many supporters (600+ stars) silently backing me, I felt I couldn’t let everyone down. No matter what, I had to push through and update the image management feature.
Additional note: The variable name is img_url, not img url; please note the underscore! 
I encountered this issue too; whether it’s a custom domain or the default domain, there are no records in the management page after uploading.
Regarding this issue, I may not have explained it clearly. Now I’ll clarify: Images will not immediately appear in the backend after uploading; they need to be loaded through your domain first to be recorded. You can try manually accessing the image after uploading to see if it gets recorded in the backend.
Redeploying worked, thank you.
The login is set up, but I have a small question: Currently, there are no permission restrictions on uploading images from the frontend; will this be added in the future...
You can enable whitelist mode to restrict image loading. Since the backend image storage uses the Telegraph image hosting service, even if frontend image uploads are restricted, others can still upload images directly through the official Telegraph service. Therefore, restricting frontend image uploads is not very necessary and not very useful.
However, you can restrict image loading, which will maximize domain security. Additionally, when you enable image loading restrictions, others will likely stop using your domain to upload images since they cannot load the images they upload. If someone only wants to upload images, they can easily deploy their own image hosting service or use the official API.
So as long as you restrict image loading and enable whitelist mode, it should be sufficient for now.
What happens if I exceed the free quota? Will the service stop responding directly, or is there a possibility of being banned?
Currently, in my tests, exceeding the quota does not lead to account bans. Whether the service stops depends on which quota is exceeded, and the specific details are explained in the post.
Here’s a screenshot of exceeding the free KV usage quota during testing for reference. If you need to use it long-term beyond the quota, please purchase a paid plan. 
This screenshot corresponds to the demo image hosting service's KV, which has exceeded the free write quota. New images added cannot be seen in the image management backend, but other functionalities remain unaffected. You can visit the demo site for testing: https://im.gurl.eu.org.
Just a step away from deploying to the server.
Support, by the way, can you add a feature that works with picgo?
You can check out what this user has written.
After setting BASIC_PASS and BASIC_USER, I can access the dashboard directly at the domain/admin without being prompted for a password. The browser...
There are issues with image display, which is a Cloudflare bug. Please refer to the text description. Remember to redeploy after setting the environment variables.
Cloudflare Pages natively supports CNAME access, allowing you to configure preferred IP directly without needing to bind a card to enable SaaS.
Updated on January 19, 2023, 4:35 AM: Optimized code logic to reduce the number of KV writes, avoiding rapid depletion of the free KV write quota. Those in need can update to the latest version.
If you don’t need the management feature, is it necessary to update?
You can choose not to update. This update mainly adds the management feature, and there are no significant changes. However, updating is also very convenient. If you do not enable the management feature, you can just click a few times on GitHub.
Actually, updating is very simple. Just refer to the update content above, first go to the Cloudflare Pages backend, set up the necessary environment variables in advance, and bind them to the KV namespace. Then go to the GitHub repository you previously forked and select “Sync fork” -> “Update branch.” After a while, Cloudflare Pages will detect that your repository has been updated and will automatically deploy the latest code.
If you don’t need the management feature, just go to the GitHub repository you previously forked and select “Sync fork” -> “Update branch.” After a while, Cloudflare Pages will detect that your repository has been updated and will automatically deploy the latest code.
After setting the KV, did you click redeploy? You need to redeploy after setting the KV or environment variables for them to take effect; this is a limitation of Cloudflare.
Fixing [Update] Telegraph-Image Free Self-Built Image Hosting Adds Backend Image Management...
https://hostloc.com/thread-1127284-1-1.html
(Source: Global Hosting Exchange Forum)