JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/" enctype="multipart/form-data" method="post">
<input id="File" name="File" type="file" multiple>
    
<div id="droparea" class="">
    <p>drop here</p>
</div>
</form>

CSS

#droparea{
    border:1px solid black;
    height:100px;
    width:100px;
}

JavaScript

var dropArea = document.getElementById('droparea');
dropArea.addEventListener('drop', handleDrop, false);
dropArea.addEventListener('dragover', handleDragOver, false);

function handleDragOver(event) {
    event.preventDefault();
    event.dataTransfer.effectAllowed = "copy";
}    
    
function handleDrop(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
    var length = event.dataTransfer.items.length;
    var elFileInput = document.getElementById('File');
    for (var i = 0; i < length; i++) {
        var entry = event.dataTransfer.items[i].webkitGetAsEntry();
        if (entry.isFile) {
            convertFilesToFileObjects(entry);          
        } 
        else if (entry.isDirectory) {
            var dirReader = entry.createReader();
            dirReader.readEntries(function(entries) {
                for (var j = 0; j < entries.length; j++) {
                    convertFileEntrysToFileObjects(entries[j]);
                }
            });
        }
    }   
    function convertFileEntrysToFileObjects(fileEntry) {        
        var addFileToInput = function (file) {
            console.log(file);
            //elFileInput.files = event.dataTransfer.files;
            //Need to make a FileList and populate it with Files.
        };       
        if (fileEntry.isFile) {
            fileEntry.file(function (addFileToInput, file) {
                addFileToInput(file);
            }.bind(this, addFileToInput));
        }
    }
}