App or Automation to convert clipboard image to Markdown Link?

The ability to customize and automate Drafts is impressive and has come a long way in recent years. I am impressed.

The one key limiting factor I see is being able to paste images. I realize I can create markdown-style image links and view them in Preview; that works except it is a good bit of work to do that if I am adding multiple images.

Does there exist an app or script or other automation which will take an image in the clipboard, post it to my Dropbox or iCloud account or similar, and then create a markdown link to that newly hosted image?

You could forego remotely linked resources and use Shortcuts to save an image to a local file. Shortcuts can access the location used by Drafts previews for resources and return a file path to a Drafts action that calls the Shortcut. It could insert the path automatically.

That is a great idea - thank you.

I almost have that working.

I can run the Insert Local Image Ref action and can see a selection of images I have placed in my iCloud Drive/Drafts/Library/Previews/images folder

Then I choose one and the markdown entry is created in my Draft

I thought that meant it is all solved… yet when I choose Preview in Drafts I get this instead of a rendered image:

It seems I am very close - what am I doing wrong?

I can’t tell for sure as you have not shared enough detail, but first of all, your paths are not URL encoded, and second, it may be your files are of a different type.

Here’s some examples to illustrate based on two identical JPG files in the images directory, but named a little differently.

Some Markdown examples:

The results:

Hope that helps you fix it.

Thank you @sylumer

It is indeed the URL encoding since it works fine if I manually change the filename

I cannot quite get the Shortcuts detail correct to automatically URL encode the filename - any thoughts there?

It looks like you are trying to encode the image content on the clipboard rather than the path to the image file.

If you call this shortcut…

…using this Drafts action…

…I think it should do what I suggested above.

Thanks for the help @sylumer - is that link correct? It only loads on the iPhone not on the Mac.

The link should be correct, you would need to modify the text replacement for the path you are using on your Mac. I think I probably missed setting that as a setup question for the shortcut.

If you want support on multiple platforms, then you could use a device model check in the shortcut or a different approach to removing the unnecessary part of the relative path than a quick and dirty text replacement like I did,

I am on the move today (UK public holiday means I am visiting family), so I am just dipping in occasionally via my phone rather than doing this on my Mac, and originally I was just trying to point you in the right direction rather than putting together a full solution.

OK - got it working by just editing the text replacement to remove the path

This works perfectly

Huge huge thanks - you are quite a resource for the Drafts community - much appreciated

1 Like

Again I appreciate your help with this shortcut and action.

I suspect this may be of interest to others. I was able to adapt the same concept to work with Dropbox instead of iCloud; the result is easier to render the images on iPhone Drafts, iPhone Devonthink to Go and Mac Devonthink 3.

These are the Shortcut and Action using Dropbox:

The main use case for me here is Devonthink and DTTG:

1 Like