File Dropzone with Progress

<div class="dz" id="dz">
  <input type="file" id="dzInput" multiple hidden>
  <svg viewBox="0 0 24 24" width="40" height="40"><path fill="none" stroke="#9099ad" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M12 16V4m0 0L8 8m4-4l4 4M5 17v2a2 2 0 002 2h10a2 2 0 002-2v-2"/></svg>
  <p><strong>Drop files here</strong> or click to browse</p>
</div>
<ul class="dz-list" id="dzList"></ul>

*{box-sizing:border-box}
.dz{width:360px;max-width:100%;border:2px dashed #cdd3e0;border-radius:16px;padding:34px;text-align:center;cursor:pointer;transition:.2s;background:#fff;font-family:system-ui,sans-serif}
.dz.over{border-color:#5b6cff;background:#f5f7ff;transform:scale(1.01)}
.dz p{margin:12px 0 0;color:#8a91a6;font-size:14px}
.dz strong{color:#1a1f36}
.dz-list{list-style:none;margin:14px 0 0;padding:0;width:360px;max-width:100%;font-family:system-ui,sans-serif}
.dz-item{background:#fff;border:1px solid #eceef3;border-radius:10px;padding:11px 14px;margin-bottom:8px}
.dz-row{display:flex;justify-content:space-between;font-size:13px;color:#46506b;margin-bottom:7px}
.dz-bar{height:5px;background:#eceef3;border-radius:999px;overflow:hidden}
.dz-fill{height:100%;width:0;background:linear-gradient(90deg,#ff7a18,#ff477e);border-radius:999px;transition:width .2s}

var dz=document.getElementById('dz'),input=document.getElementById('dzInput'),list=document.getElementById('dzList');
dz.onclick=function(){input.click()};
['dragenter','dragover'].forEach(function(ev){dz.addEventListener(ev,function(e){e.preventDefault();dz.classList.add('over')})});
['dragleave','drop'].forEach(function(ev){dz.addEventListener(ev,function(e){e.preventDefault();dz.classList.remove('over')})});
dz.addEventListener('drop',function(e){handle(e.dataTransfer.files)});
input.addEventListener('change',function(){handle(input.files)});
function handle(files){[].forEach.call(files,function(f){
  var li=document.createElement('li');li.className='dz-item';
  var kb=(f.size/1024).toFixed(0);
  li.innerHTML='<div class="dz-row"><span>'+f.name.replace(/[<>&]/g,'')+'</span><span>'+kb+' KB</span></div><div class="dz-bar"><div class="dz-fill"></div></div>';
  list.appendChild(li);
  var fill=li.querySelector('.dz-fill'),p=0;
  var t=setInterval(function(){p+=Math.random()*25;if(p>=100){p=100;clearInterval(t)}fill.style.width=p+'%'},150);
})}