Drag And Drop Images, And Not Links, Between Windows - Html5

I'm trying to make a drag and drop uploader in HTML5 with the added requirement of being able to do so with files dragged from other websites I don't own and can't edit (mostly ima

Solution 1:

At dragover event handler, iterating event.dataTransfer.types

The DataTransfer.types read-only property is an array of the drag data formats (as strings) that were set in the dragstart event. The order of the formats is the same order as the data included in the drag operation.

the array contains three types:

• text/plain
• text/uri-list
• text/html

text/html is the html string of the dragged <img> element.

Get the string using by passing "text/html" to .getData(), then either extract src of html string using RegExp or create an element and append the html string to the element, then get src of <img> element using .src.

holder.ondrop = function (e) {
  e.preventDefault();       
  this.className = '';
  var img = e.dataTransfer.getData("text/html");
  var div = document.createElement("div");
  div.innerHTML = img;
  var src = div.firstChild.src;
  console.log(div.firstChild, src);
  results.innerText = src;
}

jsfiddle https://jsfiddle.net/2m58rfou/6/