Automatically upload pasted images to Doge Image Bed in vscode.

There are some issues with the solution in this article, so I recommend using a more perfect method.

Recently, I heard about a time-limited free Dogedoge Image Hosting, which supports mainland China CDN and high-performance real-time cropping. I also sent an email to the author to try to apply for it, and it was approved after about two or three days.

After obtaining the image hosting service, of course, I configured automatic image uploading. I have been using Typora to write Markdown for a while, which allows me to easily use the "Custom Image Upload Command" to integrate with PicGo-Core for image uploading. But now I prefer to use VS Code to write blogs, so the requirement has changed to automatically upload pasted images to Dogedoge Image Hosting in VS Code. This article records my exploration process and the solution.

Exploration#

As far as I know, PicGo-Core is based on a plugin design, so it should be easy to meet the custom uploading requirement by manually writing a plugin. The difficulty lies in the integration of pasting images in VS Code and the PicGo upload command.

Unfortunately, after searching for a while, I couldn't find a hook for customizing the paste image command in VS Code. The current PicGo extension for VS Code only supports the eight image hosting services officially supported by PicGo-Core, and it does not support custom plugins for PicGo-Core.

The plugin feature of PicGo-Core is still a work in progress.

Solution#

Fortunately, during the search process, I found another VS Code extension: vsc-markdown-image. This extension supports custom upload methods, and you only need to write an asynchronous JavaScript function to implement the upload and return the image link.

The template provided in the official documentation is as follows:

const path = require('path');
module.exports = async function(filePath, savePath, markdownPath) {
    // Return a picture access link
    return path.relative(path.dirname(markdownPath), filePath);
}

Parameter explanation:

filePath => The path of the temporary image file
savePath => The generated image file name based on the settings
markdownPath => The path of the current .md file

The template code directly returns the relative path of the image to the current Markdown file.

Using my limited knowledge of JavaScript, I wrote a simple upload function:

const path = require('path');
const got = require('got')
const FormData = require('form-data')
const fs = require('fs')

module.exports = async function (filePath, savePath, markdownPath) {
    // Fill in your token here
    const token = 'your token'
    const postURL = `https://www.dogedoge.com/tools/upload/${token}`
    const form = new FormData()
    form.append('file', fs.createReadStream(filePath))
    try {
        const resp = await got.post(postURL, {
            body: form
        })
        let response = JSON.parse(resp.body)
        return response.data.o_url
    } catch (error) {
        console.error(error)
        return path.relative(path.dirname(markdownPath), filePath);
    }
}

After testing, it can upload images properly.

Usage#

I have uploaded the code to a GitHub repository. The usage is as follows:

# Download the code
git clone https://github.com/amtoaer/vsc-markdown-image-dogedoge
# Switch to the directory
cd vsc-markdown-image-dogedoge
# Install dependencies (two methods are optional):
# 1. Install dependencies using yarn
yarn
# 2. Install dependencies using npm
npm install

Then, you need to install the Markdown Image extension in VS Code and configure the extension as follows:

Markdown-image > Base: Upload Method set to "Custom"
Markdown-image.DIY: Path set to the absolute path of the upload.js file

With these configurations, when you need to upload an image, simply right-click in the editing area and select the "Paste Image" option, or use the shortcut ALT + SHIFT + V.

(Note: The translation of the code snippets is for reference only and may need to be adjusted based on the actual code structure and requirements.)