JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropContainer" id="dropContainer">Drop Here</div>

<input type="file" id="fileInput"/>

<div id="iamgetwo">
   <img src="http://a.mktgcdn.com/p/khxNbcdQcr1HQKNgk9cPNUyWUprmZ5Dryx9P5MAV0SE/2669x3840.jpg">
</div>

CSS

.dropContainer{
  width: 1000px;
  height: 200px;
  border: 1px solid #252525;
}



#iamgetwo img {
  display: inline-block;
  position: relative;
  float: left;
  width: 300px;
}

JavaScript

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);
   
dropContainer.ondrop = function(evt) {
  //evt.preventDefault();
  if(evt.dataTransfer.files[0]){
    console.log("is a file");
    const dT = new DataTransfer();
    dT.items.add(evt.dataTransfer.files[0]);
    fileInput.files = dT.files;
  }else{
    // Try dataTransfer url second
    var dataTransferUrl = evt.dataTransfer.getData('url');
    if(dataTransferUrl){
      console.log('is a url');
      console.log(dataTransferUrl);
    }
  }

};