Markdown: Paste image from clipboard - image filename

[agabhinav]

Type: Feature Request

OS Name: Microsoft Windows 10 Enterprise
VSCode 1.78.2
Extensions: WSL, Git Graph, Markdown Preview Mermaid Support

Scenario:
Paste image from clipboard in markdown, and use current-date-time or GUID as image file name.

Steps:

1. Edit settings.json to enable markdown paste.

"editor.experimental.pasteActions.enabled": true,
    "markdown.experimental.copyFiles.destination": {
        "**/*": "${documentDirName}/images/"
    }

2. Copy image in clipboard (ctrl-c).
3. Paste clipboard image in markdown (ctrl-v).
4. This creates an image (image.png, image-1.png...) and links to it as shown below.

![Alt text](images/image.png)
![Alt text](images/image-1.png)

Ask/How-to:
Instead of using the default image.png, image-1.png,... etc. I would like to specify filename for the pasted image in markdown using current-date-time, or GUID or other custom format. It'll be good to have an ability to pre-define such formats, and (optionally) the ability to override at runtime.

For example:

![Alt text](images/2023-05-26-10:50:00.png)
![Alt text](images/2023-05-27-10:45:00.png)
![Alt text](images/53d5f90a-b1d5-4bc2-b9af-9e06895318fe.png)
![Alt text](images/31815814-1c8b-4684-b49c-4e3c9a4d6891.png)

VS Code version: Code 1.78.2 (b3e4e68, 2023-05-10T14:39:26.248Z)
OS version: Windows_NT x64 10.0.19045
Modes:
Sandboxed: Yes
Remote OS version: Linux x64 5.15.90.1-microsoft-standard-WSL2

[VSCodeTriageBot]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[VSCodeTriageBot]

🙂 This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[JustinGrote]

As a note, the copy files destination setting is no longer experimental. However, an issue exists where when you paste an image, the ${fileName} is blank and therefore glob matching seems not to work so you cannot customize where the image paste goes, it always goes to image.png. @mjbvz a simple fix may be that, when the markdown insert paste is invoked, if the image does not have a path to simply define it as image.png, so that it can then be matched by the copy files: Destination setting.

If images is the only thing you want to paste, this is an effective workaround for now:

"markdown.copyFiles.destination": {
  "**": "images/${documentBaseName}/image.png"
}

[agabhinav]

"markdown.copyFiles.destination": {"**": "images/${documentBaseName}/image.png"} works almost the same as "markdown.experimental.copyFiles.destination": { "**/*": "${documentDirName}/images/"} except the pasted images are not saved in a separate folder. But they still have the sequential naming such as image.png, image-1.png and so on.

I am looking for a way to provide a filename template in settings.json for the pasted image so instead of having names like image.png, image-1.png, I can get filenames with a GUID, or current date time etc. depending on the provided template, with an ability to override the template when pasting the image.

[JustinGrote]

Right, additional wildcards for GUID and DateTime would be great. FYI this functionality is already available in an extension, but it would be nice for it to be first party.
https://marketplace.visualstudio.com/items?itemName=dendron.dendron-paste-image

[agabhinav]

I agree, having this functionality integrated directly into VSCode without relying on an extension would be highly beneficial. Furthermore, I have tested these extensions and discovered that they do not function when opening VSCode in a WSL2 Linux distribution, such as Ubuntu. Pasting an image using such extensions give an error 'There is not an image in the clipboard.' even after installing xclip.

[ArthurKun21]

I think there is a bug in ${documentDirName} and it prints out the whole path instead of just the parent directory

PROJECT_DIR/test/read.md

The config is /docs/${documentDirName}/${documentBaseName}/ and then it prints out as ../docs/home/user/test/test/read/image.png

instead of just ../docs/test/read/image.png

The PROJECT_DIR is /home/user/test

It works the same for either WSL2 and Windows

[akharrou]

Please make the naming of the image as customizable as vscode snippets, with the same variables available, and same features (eg. regular expression match and substitution of variable expansions).

[agabhinav]

Right, additional wildcards for GUID and DateTime would be great. FYI this functionality is already available in an extension, but it would be nice for it to be first party. https://marketplace.visualstudio.com/items?itemName=dendron.dendron-paste-image

It'll be great to have such functionality integrated directly into VSCode.

[akharrou]

Also, sometimes when writing markdown you want to insert images using the html img tag, for more control over the style. It would be very useful if you could provide the option to completely customize the text output such that we could make it output the image within html img tags.

[enkelmedia]

I would like to add to this one as well, when I work on notes or docs etc in VS Code I love the ability to just paste a screenshot into the markdown but I would like to be able to give my file a descriptive name, not just "image", a timestamp or a GUID.

I can see a couple of ways that could work:

• When enabled a dialog would show up allowing me to name the file to be stored
• A refactoring that would allow me to easily change the markdown-link and the filename at the same time.

[yogendra-yatnalkar]

As a note, the copy files destination setting is no longer experimental. However, an issue exists where when you paste an image, the ${fileName} is blank and therefore glob matching seems not to work so you cannot customize where the image paste goes, it always goes to image.png. @mjbvz a simple fix may be that, when the markdown insert paste is invoked, if the image does not have a path to simply define it as image.png, so that it can then be matched by the copy files: Destination setting.

If images is the only thing you want to paste, this is an effective workaround for now:

"markdown.copyFiles.destination": {
  "**": "images/${documentBaseName}/image.png"
}

Thanks for sharing. This worked like charm.

[A-Rai-col]

I was also looking for a way to customize the image file names e.g.

{
    "markdown.copyFiles.destination": {
        "/**/*": "${documentWorkspaceFolder}/.attachments/${documentBaseName}_Images/${markdownHeader}-${dateTime}.png"
    }
}

And say I have a markdown file in root/Topic/Instructions.md. Where when the user pastes the image into a section of the document it would name it as such.

# Instructions

## Getting Started
![Alt text](.attachments/Instructions_images/Getting-Started-2024-03-08-10:50:00.png)

Which would make the images easier to maintain.
Currently have to paste , rename image file, rename link.
Doesn't have to be prefixed with a markdown header (might be too dynamic), but at least including datetime would be great.

[enkelmedia]

Thanks @A-Rai-col =D I'm aware of this feature - it's great but it would be ever better to be able to rename the file if needed =D

[leizhiyuan]

It seems that it is still not supported now, right?