HTML5 drag and drop between windows

is there anyway with the HTML5 Drag & Drop functionality or/and the File API to drag an jpg image from one window to another?

The idea is that I could drag and image from Facebook to a different browser's window with a custom HTML that would get that image.

Or, at least, a way to drag from the Desktop to a browser?

Thanks a lot

Solution 1:

Not sure about between windows, but certainly from the desktop:

http://studio.html5rocks.com/#Photos

Actually, check out the full html5rocks.com site for ideas.

EDIT:

I just opened this demo in two separate browser windows, and I can drag from one window to the other. I was also able to drag a thumbnail from Facebook and drop it into a drop zone.

However, the Facebook image was dropped as "unknown". So it looks like you can drop from one site to another, but I'm not sure what exactly really gets dropped. If you are dragging from Facebook or such, Facebook may need to have the images or elements have the draggable property set or something else that your application can read.

Bottom line is that you should be able to make it work between applications that you have control over. But if you are trying to integrate it with external apps, you will need to do some experimentation to find out what exactly gets passed during the drag/drop. I haven't done this work myself, but it shouldn't be hard.

Solution 2:

This is an old one, but since I recently tussled with it and there is more to this than you might think, I put an answer in. As an introduction to learn about the native methods refer to this site.

That will get you so far. When it comes to dragging between windows, things get smelly. The problem is that once again, there isn't much consistency between browsers. Open up a bunch of different browsers and then open this excellent example. Select the first getData('Text') radio button and test dragging and dropping images. The first thing that you will notice is that in some instances getData('Text') contains a url, but not the image url. So, now choose getData(e.dataTransfer.types[0]) based on detected content type radio button. You will notice depending on which browser you choose that some types contain the url to the image appears, but each browser has different types. At the time of writing this some browsers (Internet Explorer) don't have any types that have the image url. This is why if you open up Google images in Internet Explorer and try that funky drag-drop image search, nothing happens - no 'drop here' box appears.

So, the best I have come up with is (make sure you refer to those links above otherwise you won't know what I am going on about): -

1. Check e.dataTransfer.files. If there are files then all is well. This is most likely a drop from the local computer. If not, go to step 2.

2. Loop through getData(e.dataTransfer.types[0]) and pass the url to a regex that checks for a string containing the image url. Something like:

   RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )
   

   If you find a match then all good. Do whatever you want, such as passing to server to retrieve image. If not, go to step 3.

3. Try getData('Text'). If you find a match then good. Pass on to server, etc. If not, go to step 4.
4. You are out of luck. Show the user with an unsupported message and ask them to provide the image another way.

Solution 3:

If you're using jQuery you could have a look at this: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

On the about page:
It works by sending a JSONP request with the URL of the image to Google's servers via the Google App Engine1. The server then converts the image into base64 encoded data URL and sends the image back as a JSON object. This means that the image can be locally included on the website and therefore it can be edited by the canvas tag.

I haven't tried it yet, but will be taking a look at it soon!

Solution 4:

*getting the url from the dragged image, 100% ok to firefox and chrome *

$('#element').bind('drop', function (e) {
    alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});

Solution 5:

I know you can very easily get the URL of the image that was dragged: myDataTransfer.getData("Text")

but so far I haven't been able to find a way to retrieve the underlying image data without falling foul of cross-domain javascript security... you can't fetch the image using ajax, and you can't use a canvas as an intermediary either.

Unfortunately, it seems that in most cases, the drag itself (that is, the dataTransfer object) doesn't contain the image data. I say "most cases" because drags from within the same browser don't, but when I dragged from a Firefox window to a Chrome window, it seems to have included some kind of bitmap image, but it's in some unusual format (perhaps a Windows thing).

The only other thing to look at is browser-specific functionality, like "application/x-moz-nativeimage", but I don't see any similar property attached to the dataTransfer object in Chrome.