JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="droparea">
    <output id="results"></output>
</div>

CSS

#droparea {
    min-height: 220px;
    background: #f8f8f8;
    border: solid 1px #e2e2e2;
    overflow-y: scroll;
}
._drop {
    display: none;
}
#droparea.__over {
    background: #e2e2e2;
}
._file {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
}
._file ._cover {
    display: block;
    width: 100px;
    height: 80px;
    background: #00b0ef;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
}

._file ._cover span{
    width: 100%;
    height: 80px;
    display: block;
    background-size: cover;
}

._file p {
    height: 40px;
    text-align: center;
    margin: 0;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

JavaScript

var droparea = document.querySelector('#droparea');
var results = document.querySelector('#results')
var tmp;

function handleFileSelect(e) {
    e.stopPropagation();
    e.preventDefault();
    
    var files = e.dataTransfer.files;
    var output = [];
    var fileTmp = '<div class="_file">'
                +'<i class="_cover"></i>'
                +'<p>_data_</p></div>';
    
    for (var i = 0, f; f = files[i]; i++) {
        var file = fileTmp.replace('_data_', f.name);
            output.push(file);
    }
    
    results.innerHTML = results.innerHTML + output.join('');    

    for (var i = 0, f; f = files[i]; i++) {
        if (f.type.match('image.*')) {
            var cover = document.getElementsByClassName('_cover')[i];
            var reader = new FileReader();
            
            reader.onload = (function (fData){
                   
                return function(e){
                     console.log(e.target)
                    cover.style.backgroundImage = 'url('+e.target.result+')';
                }
                
            }(f));
        
            reader.readAsDataURL(f);
        }
    }
        
    droparea.className = '';
    
}

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

        droparea.className = "__over";
    }

droparea.addEventListener('dragover', handleDragOver, false);
droparea.addEventListener('drop', handleFileSelect, false);