JSFiddle - React, Tailwind, and code Playground

HTML

<div>Drop here</div>

CSS

div{
  border:1px solid red;
  height:240px;
  width:100%;
}

JavaScript

var dropper = document.querySelector('div');
dropper.ondragover = function(e) {
    e.preventDefault();
}
dropper.ondrop = function (e) {
    e.preventDefault();
    var url = e.dataTransfer.getData('url');
    if(url){
      console.log('Url');
      console.log(url);
      var img = document.createElement('img');
      img.crossOrigin = 'anonymous';
      img.onload = function(){
        var canvas = document.createElement('canvas');
        canvas.width = this.width;
        canvas.height = this.height;
        var context = canvas.getContext('2d');
        context.drawImage(this, 0, 0);
        console.log(canvas.toDataURL());
      };
      img.src = url;
    }else{
      console.log('File');
      var file = e.dataTransfer.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
    }
};