JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<label id="dropbox">
    <input id="native-file-selector" type="file" />
    <span>DRAG &amp; DROP OR CLICK HERE</span>
</label>

CSS

#native-file-selector {
    display: none;
}

#dropbox {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 2px dashed gray;
    border-radius: 15px;
    cursor: pointer;
    word-wrap: break-word;
    text-align: center;
    padding: 15px;
}

#dropbox.drag-over {
    background-color: rgba(0, 255, 0, .2);    
}

#dropbox.has-file {
    border: 2px solid gray;
}

JavaScript

/**
 * file selector
 * dragstart, drag, dragend
 * dragenter, dragover, dragleave, drop
 */

var handleFiles = function (e) {
    e.stopPropagation();
    e.preventDefault();

    if (e.dataTransfer) { // drag and drop
        dropbox.files = e.dataTransfer.files;
        nativeFileSelector.files = dropbox.files;
    } else { // click
        dropbox.files = e.target.files;
    }

    if (dropbox.files.length > 0) {
        dropbox.classList.add('has-file');
        dropbox.innerHTML = dropbox.files[0].name + ' (' + dropbox.files[0].size + ' bytes)';
    }
};

var nativeFileSelector = document.getElementById('native-file-selector');
nativeFileSelector.addEventListener("change", handleFiles, false);

var dropbox = document.getElementById('dropbox');

dropbox.addEventListener('click', function (e) {
    delete nativeFileSelector.files;
});

dropbox.addEventListener("dragenter", function (e) {
    e.stopPropagation();
    e.preventDefault();
    dropbox.classList.add('drag-over');
}, false);

dropbox.addEventListener("dragover", function (e) {
    e.stopPropagation();
    e.preventDefault();
}, false);

dropbox.addEventListener("dragleave", function (e) {
    e.stopPropagation();
    e.preventDefault();
    dropbox.classList.remove('drag-over');
}, false);

dropbox.addEventListener("drop", function (e) {
    e.stopPropagation();
    e.preventDefault();
    dropbox.classList.remove('drag-over');
    handleFiles(e);
}, false);