Obsidian Image Upload Plugin: Image Upload Toolkit
This article predominantly introduces the Obsidian image upload plugin Image Upload Toolkit that I have developed.
Background
Why did I create this plugin? The story starts from last year.
I realized that after six years of usage, Mweb Pro could no longer meet my requirements. Not that Mweb isn’t a good product, indeed, over the past few years, I have frequently recommended it to friends. It is an excellent product with abundant features, convenient shortcuts, and an interface that satisfies my personal aesthetic, not to mention its appealing one-time purchase model.
However, as my content increased over the years, Mweb’s plethora of features couldn’t cater to my personalized needs. For instance, automated content formatting, adding spaces between Chinese and English characters, and numbers, blank lines between paragraphs, and so on. These requirements are difficult to meet with closed products like Mweb, especially for individual developers (as Mweb was developed by one). Catering to personalized demands can be costly, let alone pleasing everyone.
Later, I intermittently used NotePlan and Notion for some time. While I rather liked Notion, it is still a closed product, making expansion challenging.
Right when I was lamenting about this in my circle of friends, someone recommended Obsidian. After testing it out, I was amazed; its plugin system is incredibly powerful. For example, the aforementioned automated formatting problem was effortlessly solved using the Linter plugin.
Thus, by installing various plugins and changing the shortcuts to match Mweb, I nearly transitioned completely to Obsidian and gained even more features. The only regret was the inability to reproduce Mweb’s image upload feature (I always used Alibaba Cloud’s OSS as an image host, and with Mweb, I could automatically upload and replace image addresses in markdown syntax). After each editing session and before publishing to the blog, I had to copy and upload in Mweb.
Last National Day, motivated by the programmer’s mindset of ‘if it doesn’t exist, create it’, I developed the first version of the plugin. After using it for a few months, I submitted it to the official plugin list, where it is now searchable and installable.
Features
The primary function of this plugin is to upload local images to the specified image host, update the image addresses in markdown syntax with the host’s link, copy the result to the clipboard, and optionally update the original content. Currently, the plugin supports two types of images: Imgur and Alibaba Cloud OSS.
General Settings
In the general settings, you can configure:
- The local directory of the images, the plugin will retrieve the images in the text from this directory.
- Whether to replace ‘-’ and ‘_’ in the image name with a space as the image’s alt text, i.e.,
[alt_text](image_url). - Whether to update the original text after image upload.
Imgur Settings
Imgur’s configuration is quite simple; you can use the default Client ID or use your account’s Client ID.
Alibaba Cloud OSS Settings
Alibaba Cloud OSS has slightly more configuration options, but those with OSS experience won’t find it unfamiliar:
- Available zone
- Access Key Id
- Access Key Secret
- Bucket name
- Image save directory, supporting variables such as
{year} {mon} {day} {random} {filename}. For example, if you use/{year}/{mon}/{day}/{filename}, the uploaded imagepic.jpgwill be saved in/2023/06/08/pic.jpg.
Acknowledgements
During the plugin’s development, I referred to obsidian-imgur-plugin, obsidian-image-auto-upload-plugin, create-obsidian-plugin, as well as drew inspiration from Mweb.
