JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="droppable_area">Upload spr file</div>
<script>
    function fileDropped(event) {
        var fileList = event.dataTransfer.files;
        for(var i=0;i<fileList.length;i++){        //>
            console.log(fileList[i]);
            var fileReader = new FileReader();
            fileReader.onloadend = function(e){
                console.log(e.target.result);
            }
            fileReader.readAsDataURL(fileList[i]);
        }
        $("#droppable_area").text("Upload spr file");
        eventHandler(event);
    }

    function fileDragOver(event) {
        $("#droppable_area").text("Drop file here");
        eventHandler(event);
    }

    function fileDropCancel(event) {
        $("#droppable_area").text("Upload spr file");
        eventHandler(event);
    }

    function eventHandler(event) {
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
    }
</script>

CSS

body {
    margin:0px;
    padding:0px;
}
#droppable_area {
    width:400px;
    height:300px;
    border : 1px solid black;
    text-align:center;
    float:left;
}

JavaScript

$(document).ready(function () {
    $("#droppable_area").attr("ondragover", "fileDragOver(event)");
    $("#droppable_area").attr("ondragleave", "fileDropCancel(event)");
    $("#droppable_area").attr("ondrop", "fileDropped(event)");
});