I'm trying to make a drag and drop uploader in HTML5 with the added requirement of being able to do so with files dragged from other websites I don't own and can't edit (mostly images).
In this case, on the ondrop
event, instead of downloading the image from the local computer using e.dataTransfer.files
and posting it, I retrieve the URL with e.dataTransfer.getData('URL')
and post it to the server for it to download server-side.
Works fines, except when I drag an image enclosed in a link.
It works when initiating drag from an <img>
element, but not with an <img>
enclosed in <a>
element. In the latter one, e.dataTransfer.getData('URL')
gives me the href
of the link, not the src
of the image.
I looked into e.dataTransfer.getData()
to see if it accepted other arguments that could help. The other alternative was "Text", and it brought up the same results as "URL".
Is there a way to get the image URL or am I doomed because the browser doesn't actualy carry the image URL when dragging an image enclosed in a link (ie : I'm dragging the link, not the image)?
UPDATE
To illustrate I created a jsfiddle here : https://jsfiddle.net/2m58rfou/
And another one with 2 images to demonstrate my problem here : https://jsfiddle.net/870asboa/
Open them in separate tabs and try dragging both images in the drop zone.
With the first image, I get what I want : https://www.gstatic.com/webp/gallery/1.sm.jpg
With the second one I get http://www.google.com/
, the link the image is enclosed in, rather than the image address.
In the second scenario, is there a way to get the image address and not the link in the ondrop
listenner, or is it impossible ? (remember that the images can be on any website, I can't catch any dragstart
event, basically only the drop
one).