Accept drag & drop of image from another browser window

user_561519 0
Viewed 16975

In Javascript, I know how to set up a drag & drop target that accepts file uploads from the user's computer. How can I set up a drop target that accepts images that are dragged from another website? All I need to know is the URL of the image that they've dragged.

I know this is possible, since Google Docs accepts image drops from other websites. Any idea how they're doing it?

html javascript
6 Answers

As the other answers correctly state: It normally depends on the CORS-Settings of the server if drag & drop from another browser window is possible (Access-Control-Allow-Origin has to be set).

However I've just found out by chance that it's possible to drap & drop any images from a Firefox (current version 68.0.1) to a Chrome window (current version 76.0.3809) and process it in Javascript, regardless if CORS headers are set or not.

See working example (based on jsfiddle of Darin Dimitrov) which accepts and directly shows images from:

  1. drag and drop from local computer (e.g. from file explorer)
  2. drag and drop from other website, if CORS headers are set, e.g. an image from https://imgur.com/
  3. drag and drop any images from Firefox window to Chrome window:
    • open jsfiddle demo in Chrome
    • open e.g. google image search in Firefox and search for any image
    • click on the image for bigger preview
    • drag & drop the preview image to the jsfiddle demo in Chrome

However this seems to be kind of a bug of Firefox and therefore I would not rely on this behaviour in an productive application.

user_92197430
Related