JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropArea">Drop Area
    <br>
    <input type="file" name="FileUpload" id="FileUpload" />
</div>

CSS

#dropArea {
    background-color: #DDDDDD;
    border: 3px dashed #000000;
    float: left;
    font-size: 48px;
    font-weight: bold;
    height: 630px;
    line-height: 630px;
    margin: 20px;
    position: relative;
    text-align: center;
    width: 300px;
}
#dropArea.hover {
    background-color: #CCCCCC;
}
#dropArea.uploading {
    background: #EEEEEE url(loading.gif) center 30% no-repeat;
}

JavaScript

(function () {

    // init handlers
    function initHandlers() {
        dropArea.addEventListener('drop', handleDrop, false);
        dropArea.addEventListener('dragover', handleDragOver, false);
        dropArea.addEventListener('click', handleClick, false);
    }

    // draw progress
    function drawProgress(progress) {
        var progressitem = $('progress');
        progressitem.val(progress * 100);
        console.log(progressitem);

    }

    function handleClick(event) {
        $("#FileUpload").trigger('click');
        console.log(event.dataTransfer.files[0]['name']);
    }

    // drag over
    function handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();

        dropArea.className = 'hover';
    }

    // drag drop
    function handleDrop(event) {
        event.stopPropagation();
        event.preventDefault();

        console.log(event.dataTransfer.files[0]['name']);
    }


    initHandlers();
})();