JSFiddle - React, Tailwind, and code Playground

by tdhulster

HTML

<div class="overlay">
    <div class="center">
        <p>Drop your CSV-file to upload</p>
    </div>
</div>

CSS

.overlay {
    opacity : 0.7;
    background : rgba(172, 172, 172, 1);
    ;
    width : 100%;
    height : 100%;
    z-index : 10;
    top : 0;
    left : 0;
    position : fixed;
    text-align : center;
    display : none;
    .center {
        top:50%;
        position : relative;
        background : $dark-grey1;
        margin-top : -60px;
    }
    p {
        padding : 25px;
        color : white;
        text-align : center;
        font-size : 1.5em;
        font-style : italic;
        font-weight : normal;
    }
}

JavaScript

$(window).bind('dragover', dragover);
$(window).bind('drop', drop);
$(window).bind('dragleave', dragleave);

function dragover(event) {
    event.stopPropagation();
    event.preventDefault();
    $('.overlay').show();

}

function dragleave(event) {
    event.stopPropagation();
    $('.overlay').hide();

}

function drop(event) {
    readfiles(event.originalEvent.dataTransfer.files);
    event.stopPropagation();
    event.preventDefault();
    $('.overlay').hide();
}