JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop-area">
    
</div>

<div id="items">
</div>

CSS

#drop-area {
   border: dashed 2px grey;
   width: 100px;
   height: 100px; 
}

img {
     with: 100px;
  height: 100px;  
}

JavaScript

var dropArea = $('#drop-area');
dropArea.bind('drop', handleFileSelect);
dropArea.bind('dragover', handleDragOver);

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.originalEvent.dataTransfer.dropEffect = 'copy'; 
  }

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.originalEvent.dataTransfer.files;

    for (var i = 0, f; f = files[i]; i++) {
        
        if (window.FileReader && f.type.match('image.*')) {
            
            reader = new FileReader();
            reader.onload = function (e) {
                var img = document.createElement('img');
                img.src = e.target.result;
                $('#items').append(img);
                console.log('hansi');
                    
            }
            reader.readAsDataURL(f);
        }
    }
}