Skip to content
Advertisement

Get src of dropped image from event target

I have a list of images that i can drap and drop, when dragging starts on image i store it’s URL in a state like this:

JavaScript

When dropping it i use that state URL to display the image:

JavaScript

But I was wondering if I could use the event e produced by onDrop to get the URL of the image, without creating another HTML img…

I want to do this to see if it’s possible to drop online images directly.

Advertisement

Answer

You can use event.dataTransfer.getData('text/html') to get the HTML of the dropped image. Then, you can use a DOMParser to read the source of the image, which works both for images on the page and images dropped from other sites.

Example:

JavaScript
JavaScript
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement