JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<div id="droparea">Drop your files here</div>

CSS

#droparea {
    width: 512px;
    height: 128px;
    line-height: 128px;
    font-size: 32px;
    text-align: center;
    border: 2px solid #007700;
    border-radius: 5px;
    background-color: #00bb00;
    color: #007700;
    margin: 20px auto;
}

JavaScript

document.addEventListener("drop", function(e) {
    for (var i = 0, l = e.dataTransfer.files.length; i < l; i++) {
        var file = e.dataTransfer.files[i],
            xhr = new XMLHttpRequest;
        xhr.open('post', 'upload.php', true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState==4 && xhr.status==200) {
                alert('File "' + file.fileName + '" is uploaded!');
            }
        }
        xhr.setRequestHeader('Content-Type', 'multipart/form-data');
        xhr.setRequestHeader('X-File-Name', file.fileName);
        xhr.setRequestHeader('X-File-Size', file.fileSize);
        xhr.send(file);
    }
});