I'm afraid I'm struggling with the basics here.. I want to provide a dataTransfer item with a valid URL to a file located on the same server that delivers the website.

Referencing that URL inside a HTML element like this

img_element.setAttribute("src", "some/relative/url.jpg");

..works for me.

But now I want this URL to be referenced by the dataTransfer of a drag event.

Doing s.th. like this:

event.dataTransfer.setData("text/uri-list", "some/relative/url.jpg");

basically works, but since the drag&drop data might be used by some external application (e.g. a file browser) the URL is missing the origin.

On the other hand providing the full URL in a hardcoded way works for the external application, e.g.

event.dataTransfer.setData("text/uri-list", "https://hardcoded.com/subpath/some/relative/url.jpg");

.. but I don't know how turn the relative URL into an absolute one.

I understand that an <img> element doesn't need to provide the full URL since the browser knows the rest - but how do I make the drag event contain all the data it needs to access the data?

I was expecting some function to exist like toAbsolute() which - inside the browser - turns a relative URL into an absolute one but all I found was references to browser.runtime.getUrl() or chrome.runtime.getUrl() but those seem to apply to web extensions only.

Am I on the totally wrong track here?