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');
window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    fs.root.getFile('test.png', {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
            var builder = new BlobBuilder();
            builder.append(reader.result);
            var blob = builder.getBlob();

            fileWriter.onwriteend = function() {
                img.src = fileEntry.toURL();
            };

            fileWriter.write(blob);
        }, function() {});
    }, function() {});
}, function() {});
                $('#items').append(img);
                console.log('hansi');
                    
            }
            reader.readAsArrayBuffer(f);
        }
    }
}

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder;