JSFiddle - React, Tailwind, and code Playground

HTML

<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
    <div id="browseFileDiv">
        <input id="openFile" name="img" type="file" />
    </div>
</form>

CSS

#browseFileDiv {
    height: 100px;
    width: 200px;
    background-color: greenyellow;
}
#browseFileDiv > input {
    display:none;
}

JavaScript

$(document).ready(function () {
    "use strict";
    $("#uploadform").on('change', function (e) {
        e.preventDefault();

        alert("Something Changed");
    });

    $('#browseFileDiv').click(function (e) {
        $(this).find('input[type="file"]').click();
    });
    $('#browseFileDiv input').click(function (e) {
        e.stopPropagation();
    });



    // Setup Drag 'n Drop

    function handleFileSelect(evt) {
        // Manually fire the change event.
        $("#uploadform").trigger("change");
        evt.stopPropagation();
        evt.preventDefault();
    }

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

    var dropZone = document.getElementById('browseFileDiv');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);
});