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.

I think the problem is: if the site is not using the HTML5 drag and drop API, when a user drags the image, the browser gives him pure data, and no type of meta information (as the src, which is what you are expecting). — YuriAlbuquerque, Jun 26 '12 at 18:57
What do you mean by "Running the HTML5 drag and drop API". As for the rest of your comment I honestly think you have the entire thing confused. — rlemon, Jun 26 '12 at 19:00
I'm talking about this: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop (Ok, I was wrong. You indeed get the URL when you drag a image. I'll search something before the answer). — YuriAlbuquerque, Jun 26 '12 at 19:04

Esailija · Accepted Answer · 2013-05-23T10:07:51.727

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

score 6 · Answer 2 · answered Aug 29 '12 at 07:56

6

You can use this

$(document).bind('drop', function (e) {        
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src');
    if (url) {
        jQuery('<img/>', {
            src: url,
            alt: "resim"
        }).appendTo('#yourId');            
    }
    return false;
})

answered Aug 29 '12 at 07:56

Yunus BAYRAK

71
1
4

e.originalEvent.dataTransfer.getData may be won't work your browser cause operating system does not affect. – Yunus BAYRAK Jun 03 '13 at 07:26

score 2 · Answer 3 · edited Dec 09 '16 at 12:34

2

Based on Yunus's answer , this seems to work in FF:

e.originalEvent.dataTransfer.getData('text/html').match(/src\s*=\s*"(.+?)"/)[1]

edited Dec 09 '16 at 12:34

n4rzul

4,059
7
45
64

answered Oct 09 '13 at 09:43

lepe

24,677
9
99
108

Tested in chrome but doesn't work. everything is fine until: e.originalEvent.dataTransfer.getData('text/html'), which value is displayed on the console but it can not be used as String. – lepe Oct 09 '13 at 09:48
for me work on chrome v30.0 and firefox v24.0, thank you;-) where did you find this trick? :-) – m1uan Nov 03 '13 at 08:32
Good to know that it works now on Chrome. @m1uan: I worked it from Yunus suggestion. – lepe Jun 26 '14 at 04:36

Drag and Drop images from another website to mine

3 Answers3

Linked