Upload images automatically to Doge image hosting when pasting in vscode.

There are some issues with the solution in this article. I recommend using a better 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, 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 use VSCode more often to write blogs, so the requirement has changed to automatically upload pasted images to Dogedoge Image Hosting in VSCode. 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 upload requirement by manually writing a plugin. The difficulty lies in the integration of pasting images in VSCode and the picgo upload command.

Unfortunately, after searching around, I couldn't find a hook for customizing the paste image command in VSCode. The current VSCode extension for picgo only supports the eight official image hosting services 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 VSCode extension: vsc-markdown-image. This extension supports custom upload methods, and all you need to do is write an asynchronous JavaScript function that performs the upload and returns 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 correctly.

Usage#

I have uploaded the code to a GitHub repository, and 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 optional methods):
# 1. Install dependencies using yarn
yarn
# 2. Install dependencies using npm
npm install

Then you need to install the Markdown Image extension in VSCode 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 click the "Paste Image" option, or use the shortcut ALT + SHIFT + V.

(Note: The translation of URLs and code snippets has been retained to maintain the integrity of the Markdown syntax and tags.)