· 3 min read

Automatically upload images in the Typora editor

# Dev Note
This article was auto-translated from Chinese. Some nuances may be lost in translation.

Typora - A Great Markdown Editor

Typora is my favorite markdown editor, and to this day, I find it unmatched in terms of ease of use. For more complex blog posts, I write them in Typora before uploading. Typora boasts a wealth of features, including:

  • Support for tables
  • LaTeX syntax support for writing equations
  • Drag-and-drop functionality for images to generate corresponding markdown syntax
  • Support for various HTML tags, such as iframe, video, ruby, and more
  • Customizable themes (written in CSS)
  • Built-in file and folder browsing and switching capabilities
  • Numerous other handy features

These well-crafted functionalities make Typora an indispensable tool for me.
However, I do have one frustration while using it: image uploads. Typora only inserts the image path into the markdown, like this syntax:

![image alt](/Users/Kalan/my/image/path.png)

If you copy it as is, it will result in broken images on the web, because users cannot access your local computer paths; you need to upload the images to cloud storage or a server. Handling this manually can be cumbersome, especially when images are large, as I often want to compress them before uploading. The thought of adding another step can disrupt the flow of my writing.

I couldn’t help but wonder if there was a way to upload images directly without leaving the editor. Typora supports powerful drag-and-drop functionality for images, and copying and pasting from the web works perfectly—it’s a fantastic UI.

Finally, I discovered this:

Uploading Images in Typora

I was amazed! This feature allows you to define actions when you drop an image into the editor, such as automatically moving it to a specific folder or uploading the image. Even better, you can define your own command to upload images!

Typora Custom Image Upload Interface

In this upload command, I compressed the image, uploaded it to S3, and returned the image URL. The remaining UI and status interactions are handled by Typora, allowing for a completely seamless image upload experience!

The final result looks like this:

Implementation

You can check out my code on GitHub (written in Node.js). The implementation is quite straightforward, but I just wanted to get it done quickly, so I installed the necessary packages and dove right in. If you prefer a DIY approach, feel free to try writing it from scratch. Currently, it only supports uploads to S3.

Conclusion

Since then, a new door has opened in my life; I no longer hesitate to post simply because I don’t want to deal with photo uploads. I’m sharing this with everyone who loves creating content with markdown.