JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder"></div>
          
          
<div id="results"></div>

CSS

#holder { 
			border: 4px dashed #336699; 
			width: 200px; 
			min-height: 200px; 
			margin: 20px auto;			
			text-align: center;
			vertical-align: middle;
			line-height: 200px;
			color: #336699;
			background-color: #223555;
		}
    
  #holder.hover { 
			border: 5px dashed #0c0; 
			color: #0c0;
			background-color: #225533;
		}

JavaScript

var holder = document.getElementById('holder');
var results = document.getElementById('results');

holder.innerText = "DROP FILE or URL HERE";


var tests = {
              filereader: typeof FileReader != 'undefined',
              dnd: 'draggable' in document.createElement('span'),
              formdata: !!window.FormData,
              progress: "upload" in new XMLHttpRequest
						};
            

if (tests.dnd) {
	holder.ondragover = function (e) { 
    var types = e.dataTransfer.types;
    for (var i = 0; i < types.length; i++) {
      console.log(types[i])
    }
    this.className = 'hover'; return false;
  };
	holder.ondragend = function () { this.className = ''; return false; };
	holder.ondragleave = function () { this.className = ''; return false; };

	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;
	}

}