Drag and Drop images from another website to mine

Question

I ran a quick google and SO search and found similar questions but none were well formed and most were old and looked abandoned (no answers, and no comments for a while). So here goes...

I want to be able to collect the url (only the url) of an image being dropped onto my site from another website.. (i.e. I have two chrome windows open. Window A has my application in it. Window B has imgur in it. I open an image click and drag it to my window and let go. Now I need to know the url of the image dropped on my page).

Here is the code I was working with for local files.

$(document).on('drop', function(e) {     var data = e.dataTransfer || e.originalEvent.dataTransfer;     console.log(data); // data.files is empty     e.preventDefault();     return false; });​ 

Again I do not want to upload anything.. i'm not trying to do anything fancy... I just need to know the location of the image being dropped on the page from another website.

Answer 1

Try this: http://jsfiddle.net/2Jet2/70/

$(document).on('dragover', function(e) {      e.preventDefault(); }); $(document).on('drop', function(e) {     e.preventDefault();     e.originalEvent.dataTransfer.items[0].getAsString(function(url){         alert(url);     }); });​ 

I get "http://static3.flattr.net/thing/image/9/4/5/5/0/huge.png?1326712342" When I dragged that image from another browser window.

.getAsString takes a callback which gets the url as argument once it's called

Doesn't work on firefox