JSFiddle - React, Tailwind, and code Playground

by Mariagrazia_Lunghi

HTML

<div></div>
<strong>Elenco files</strong>
<ul></ul>

CSS

div{
    width: 100px;
    height: 100px;
    background: green;
}

JavaScript

document.querySelector('div').addEventListener('drop', function(e){
    e.preventDefault();
    e.stopPropagation();
    var files =  e.dataTransfer.files,
        ul = document.querySelector('ul');
    for(var x=0; x < files.length; x++){
        var file = files.item(x);
        ul.insertAdjacentHTML('beforeend',"<li>" + file.name + " - " + Math.round(file.size / 1000) + 'Kb - ' + file.type);
    }
}, false);