晓风残月

title: Automatically Upload Pasted Images to Dogedoge Image Hosting in VS Code
date: 2020-12-29 11:04:57
tags: ['image']#

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

Recently, I heard about a time-limited free image hosting service called Dogedoge. It supports mainland China CDN and high-performance real-time cropping. I sent an email to the author to apply for it and got approved after two or three days.

After getting the image hosting service, the next step is to configure automatic image uploading. I used to use Typora to write markdown, which allows easy integration with PicGo-Core through the "Custom Image Upload Command" to upload images. But now I use VS Code more often for blogging, so the requirement becomes automatically uploading pasted images to Dogedoge image hosting in VS Code. This article documents my exploration process and the solution I found.

Exploration#

As far as I know, PicGo-Core is designed with a plugin system, so it should be easy to achieve custom uploading by manually writing a plugin. The difficulty lies in integrating the image pasting in VS Code with the PicGo upload command.

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

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

Solution#

Fortunately, during my search, I found another VS Code extension: vsc-markdown-image. This extension supports custom upload methods by simply writing an asynchronous JavaScript function that uploads the image and returns the image link.

The official documentation provides the following template:

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 simply 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 successfully.

Usage#

I have uploaded the code to a GitHub repository. Here is how to use it:

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

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

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

With this configuration, 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.