How to handle drop events with a "semi-image" URL ("images" from other websites)

Question

What do I mean by a semi-image? (if you have a better wording for it-suggestions are welcomed)

Well, as an example- go to Google Images (it's the same for many other websites as well) and search for "cat". Dragging and dropping the first item onto my droppable area gives just one URL which isn't exactly one of an image, for instance- https://www.google.com/imgres?imgurl=https%3A%2F%2Fr.hswstatic.com%2Fw_907%2Fgif%2Ftesla-cat.jpg&imgrefurl=https%3A%2F%2Fanimals.howstuffworks.com%2Fpets%2Fteslas-cat-and-other-feline-fascinations.htm&docid=yTPSYBCDHgIU0M&tbnid=GTJT8CqjTKEtwM%3A&vet=10ahUKEwiYtpzaiKbdAhUytosKHSXeC4AQMwjhASgAMAA..i&w=907&h=510&bih=937&biw=1855&q=Cat&ved=0ahUKEwiYtpzaiKbdAhUytosKHSXeC4AQMwjhASgAMAA&iact=mrc&uact=8

That kind of "not simply an image" url happens for many different websites- Google Images was just an example (most of the time it actually is an image file and everything is working fine). More specifically,within the drop event handler,

event.dataTransfer.getData("URL");

gives that kind of a url, and

event.dataTransfer.files

is just an empty list for that event.

Now,remember that what the user actually saw was an image being dropped onto the droppable area- so if that won't work on something which is supposed to accept images,that would be a frustrating experience for the user. When I drop those kind of semi-images (from any website) onto Google images droppable area everything is working fine,so there must be a way.

My question is- how do I handle those kind of events and produce a Blob/a File Object from it?

Answer 1

If you need to download an image dragged into your droppable area, best way to do it is to send the URL to your back-end and download from there (any back-end technology is suitable).

By doing a quick Google search, you can find some related work: [1], [2] and [3].

Here's a small code example showing how that would work in the JavaScript side:

// Get raw HTML from dropped element
var droppedHTML = evt.dataTransfer.getData('text/html');

// Assuming that the dropped element is an image, get the "src" attribute (URL)
var dropContext = $('<div>').append(droppedHTML);
var imgUrl = $(dropContext).find('img').attr('src');

// Now you can call your API via AJAX or some other way
$.post('analyze_image.php',
    {
        imgUrl: imgUrl,
    },
    function(response, status) {
        // Feedback on response
    }
);

Then, in your back-end, assuming you have a PHP server, you can download from there, as showed in this Stack Overflow thread:

file_put_contents($imagePath, fopen($imgUrl, 'r'));