Encoded URLs not recognised when linking to create card

[james-collins]

Additional context

• React native application written in JS/TS
• Linking into Anki to create cards with text on one side and an image on the other
• Image URL has access params that cannot be removed or the image won’t be fetchable
• API docs say to encode the image URL, y attempts to encode resulted in URL added as a string not an image

Explination

As explained on (url-schemes.html#adding-notes) I can link into the anki app from my app & add a card. If the card has an image you can specifry the URL to the image and anki will resolve the image to use for the card.

However, if the url has multipule query params it will subsiquently have a “&” character which will malform your linking string. For example:

       await Linking.openURL("anki://x-callback-url/addnote?" +
            "type=Basic&" +
            "deck=Default&" +
            `fldFront=${phrase}&` +
            `fldBack=`${baseUrl}${encodeUriComponent("?size=1000&fakeParam=foo.jpg")}&` +
            "tags=someTag" +
            "x-success=schemeformyapp")

Note the “&” in the URL above to add the fake param as recommended in docs. The docs recommend the following:

Special characters in the URL must be escaped. For example, if you have spaces in a field, they must be represented with %20 . If you’re using the Shortcuts app, there is a URL encode action which you may find useful.

If I encode the URL with encodeUriComponent (javascript), it is not recognised as a link and added to the card as text.
EDIT: initally example was wrong and using encodeUri. Updated example to encodeUriComponent.

Please also note I’ve used apple shortcuts to encode the uri as suggested and got the same result as my snippet above

Is this a limitation of the linking API that isn’t correctly documented or am I not passing the URL correctly?

Thanks in advance

[dae]

I don’t think encodeURI() encodes ampersands, and you’ll definitely need to do that so it is clear that it’s part of the link, and not a separate argument to the anki:// scheme. Maybe encodeURIComponent() will work better.

[james-collins]

Thanks a lot for your feedback @dae . You are right. I had forgotten to mention I had been encoding to encodeUriComponent and switched to encodeUrl (not sure why, was late at night I suppose )

Issuer persists - Updated example code and behavour.

When I use encodeUriComponent, the url was attempted to be resolved by anki but the query params were completely ignored. Causing the fetch to throw and card fail to be added.

I’m not sure what parsing is happening on that field on the anki side but the docs suggest that should be ok?

[dae]

I suggest you start by manually constructing a URL. If that works, it indicates the problem is in your escaping routine rather than in AnkiMobile itself, and you’ll know where your attention needs to be focused.