How can I share an image with navigator.share?

Technical Topics PyScript
1

I using it like this:

async def share_eq(e):
    base64url = document.getElementById('img').src
    blob = await (await fetch(base64url)).blob()
    file = File.new([blob], 'eq.png', {type: blob.type})
    navigator.share({
        "title": 'Generated EQ',
        "text": 'Can you solve this??',
        "files": [file],
    })

And it just prints out:

Future exception was never retrieved\nfuture: <Future finished exception=JsException(TypeError: Failed to execute 'share' on 'Navigator': No known share data fields supplied. If using only new fields (other than title, text and url), you must feature-detect them first.)>

And even tho I try also using url instead of files it returns the same error

2 Likes
2

Just sharing the solution we came up with over on the community discord for those who find this in the future:

navigator.share() takes an Object as its only argument, but the code above uses a Python Dict as the argument, which gets converted to a JS Map.

Using to_js(..., dict_converter=Object.fromEntries) to convert the Python Dict to a JS Object works:

data = { 
    "title": 'Generated EQ',
    "text": 'Can you solve this??',
    "files": [file] }
navigator.share(to_js(data, dict_converter=Object.fromEntries))

Or you could create a new Python object with title, text and files attributes. But I think the solution above is more Pythonic.

1 Like