Insert Local Image Reference example

This example action is not very polished but meant to be a utility to work with the new local asset support in HTML previews.

If you create a folder at iCloud Drive/Drafts/Library/Previews/images and place some images in it, this action will generate an HTML prompt displaying those images, allowing you to select one and have it insert a ![img](images/img.jpg] style Markdown image reference to that image which is compatible with HTML Previews.

Demo

3 Likes

A note about working with local assets in iCloud Drive

Web views do not trigger iCloud Drive to update files. To use them with these local assets across devices, you many need to open the folder in the Finder, or Files app on iOS, and make sure iCloud Drive has downloaded any assets in these folders if they were created or added to iCloud Drive on other devices!

3 Likes

It might be enough to open the file from a script action.

I am not completely sure but my first tests on iOS worked - at least if both devices are online.

Anyone with different experiences?

Hey there…new guy here. Been using drafts for quite a while and will be purchasing the pro plan for 'my Christmas present!

A question I had here…I am using on iPad with latest OS and have created the image folder as instructed, placed a few images in it, and ran the script.
I keep getting this error:


Is there a trick here I am missing?

Many thanks, love this app!!!

Have you confirmed the presence of those images in the Files app on that device? (If you, say, added them on a Mac, they might not be there yet).

Confirmed. I moved them from my photos to the new /images directory. These files have not been anywhere else than my iPad.

Does the script care about sizing or that they are of a specific image type? (IE: png, sag, jpeg, jpg)

Appreciate the quick reply!!

The code that is dong the listing looks like this. There are no file extension checks applied.

let fm = FileManager.createCloud();
let images = fm.listContents(`${basePath}${imagesPath}`);
	
if (images.length == 0) {
	alert("Place images in the `iCloud Drive/Drafts/Library/Previews/images` folder to use this action");
	return false;
}

imagesPath and basePath being defined as:

let imagesPath = "images/";
let basePath = "Library/Previews/";

That matches the error message, so it really is suggesting you don’t have any files in that folder on your device. In Files, can you navigate to one of your images in that folder, long press and select show info to get the path?

It should look identical to the above.

Here is my environment (looks to be right):

Looks good :+1:t2:

All I can think of to suggest right now is the same as whenever you get odd behaviour. Try a device reboot - it fixes a lot, but not all, weird stuff.

:man_shrugging:t2:

Yeah I was thinking of deleting all of the images and the folder — restarting the device and trying it all over again.

Thanks for hanging with me here and trying to help.

The best analogy I can think of is this: Save a recording to DropBox in an app. Now go to the DropBox app. The item probably won’t already be there - according to the app.

I don’t know how to force Drafts to scan the folder. Maybe this isn’t a thing.

Two things to check.

That might not be the problem at all’
I am only brainstorming…

  1. Spaces in file names and paths has to be done right. (I try not to use spaces in the filesystem at all)

  2. Be aware of upper and lower case letters in your filenames. something.jpg is not something.JPG in most systems (I would say only on windows)

I have a very weird issue with the iCloud in another app. one file with a strange extension (.pyui) will always be lost locally on the next applications start.
I mention that because your image is named .jpegwith an extra e they are mostly called .jpg due to an old three character limitation for the extensions.

1 Like

If I have a similarly named file with spaces and the .jpeg extension, it still gets listed in the action’s selection correctly.

Mac

iPad

The file listing should be returning the file name, but it isn’t. It is showing in Files for @Copperajah on the iPad, in the expected location, but the action isn’t picking it up, and is instead giving the zero file count message from the action. Something between and including the OS and Drafts is failing, but I don’t think anyone else has been able to reproduce the issue … yet.

Thanks for the clarification.

I did never have a problem with a file in iCloud that was not picked up on a second device in Drafts.

Only in Pythonista where files created on one device would not sync over to the other device.

that’s fantastic!

i currently use dropbox to store images and manually paste them as markdown links.
One question though, if you have thousands of images in the iCloud folder, is there a quick way to search an image? Also could this be used to add the same images from a non iCloud locations (such as Dropbox?)

best

z

Quick, no. But, if you use a good folder structure and naming conventions you can make your life much easier. You could tailor the action to suit your own needs, but I have always found content listing to be slow regardless of the number of files.

No. The images for preview inclusion in this way have to be located in a particular iCloud location. However, if you have public shares on all of your Dropbox images, I believe that it should be possible for you to write Drafts scripting functions utilising the Dropbox rpcRequest to list the files and get those URLs for insertion.

Came from CP/M - where I remember reading directory blocks in Z80 Assembler (looong ago). :slight_smile:

I have completely rebuilt the library and the images…still no love. I don’t get it…

Okay, let’s take a bit of a sideways step and try a different action to verify what Drafts sees in your Previews directory.

Here’s an action I’ve put together which can query some information about Drafts.

I expect I’ll expand this v1 in case it proves useful in helping to track down issues in people’s Drafts set-up here on the forum. I figure it might be helpful to have a basic diagnostic/info gathering tool of sorts available.

When you run the action, you should get a prompt like this:

2020-12-17-22.44.45

You can tick any boxes you are interested in (beware any file system querying via Drafts can be very slow) and it will output the results based on the options you select at the bottom.

The one we’re interested in here if the “Directory Listing for Previews”, and what Drafts can “see” inside that directory structure in iCloud.

Set the copy results to “As MultiMarkdown” so that the final results are copied to the clipboard in a format you can just paste into a forum post. But, if there is the chance that you could generate a large listing choose the “As MultiMarkdown in a Hidden Details Section” and it will wrap it in a spoiler section so it won’t make the post excessively long by default.

2020-12-17-22.50.34

When I run it in my current (farirly ‘clean’) state, my preview for just selecting this one option then comes back like this:

2020-12-17-22.52.43

And the clipboard content when pasted into the forum post produced this:

Recon Results

Previews Listing

Library/Previews/images/
Library/Previews/images/armour.jpg
Library/Previews/images/more armour.jpeg
Library/Previews/images/dummy.txt

Generated at: Thu Dec 17 2020 22:52:38 GMT+0000 (GMT)

Generated by: RECON-01


I’m not promising that this will definitely provide any additional insight for this issue, but by testing with a separate action which is explicitly running the listing, if there is a deviation in results, that will give us another data point and a potential clue as to what is beleaguering you.

Previews Listing

Library/Previews/temp-F299C7EC-37A5-470C-9EF8-269B26CB359E.html
Library/Previews/Images/
Library/Previews/Images/vitruvian-man.png
Library/Previews/Images/New-image .jpeg

Generated at: Thu Dec 17 2020 18:48:25 GMT-0500 (EST)

Generated by: RECON-01