HTML containing FM bookmarked local images > WebView

Scriptable
1

I have a folder of images in iCloud Drive in files. I can set a FileManager bookmark and list the directory–works great, produces an array of filenames.

What I want to do is construct (in a script) an HTML page that has all of those images one right after the other and then send that to a WebView. Basically what I have is:

var fm = FileManager.iCloud()
file = fm.bookmarkedPath("logos")
files = (fm.listContents(file))

for (i=1;i<files.length;i++){ 
var oneimg = fm.joinPath(file, files[i]);
html += '<img src="file://'+oneimg+'" >';
html += '<p>'+oneimg+'</p>'
}
WebView.loadHTML(html)

I’m pretty sure what’s happening is I’m not constructing a valid URL for the image that WebView can parse within an html document. I’ve tried it with “file://” and “shareddocuments://” as a prefix to the path. No luck.

Any advice? Thanks if you can.

2

Looks like WebView can’t access bookmarked files. You could try to load the images as base64 and embed them with a data URL.

1 Like
3

I know that this topic is already 10 months old but I had the same problem and encoding an image in Base64 isn’t a good solution because takes a second or two.
In my case I wanted to show about 50 images in a WebView and therefore had to come up with a different solution.

Quick summary:

  • We can’t access bookmarked files directly in WebViews.
  • Encoding in Base64 works but is slow.
  • WebViews have access to Scriptables temporary directory and files in it if the base path of the document is set to Scriptables temporary directory. (fast / no noticeable delay on my iPhone X)

Explaination:
We can’t access the file directly but we can copy the file to the temporary directory and access the copy of the file if the base path of the document presented by the WebView is the temporary directory because Scriptable is allowed to access bookmarked files but WebViews created by Scriptable are only allowed to access Scriptables files.
This means that we have to copy all files into a folder that’s owned by Scriptable before we’re able to access them in a WebView.

POC:

/*
 * I don't use the iCloud file manager but this should also
 * work with FileManager.iCloud()
 */
var localFM = FileManager.local()
var file = localFM.bookmarkedPath("image")
var fileName = localFM.fileName(file, true)
var tmpDir = localFM.temporaryDirectory() + "/"
/*
 * For some reason localFM.temporaryDirectory() returns
 * the path to the temporary directory without a / at the end
 * which we need whenever we want to use it.
 */

localFM.copy(file, tmpDir + "/" + fileName)

var wv = new WebView()
wv.loadHTML('<img  src="' + fileName + '" >', encodeURI("file://" + tmpDir))
await wv.present()

/*
 * localFM.copy will throw an error if a file already exists at
 * the destination file path and in addition to this it's also a
 * good idea to clean up the mess you made.
 */
localFM.remove(tmpDir + fileName)
2 Likes