Upload Dropzone

<!-- Upload Dropzone · NedDev · eigen werk. -->
<div class="jouw-container">
<label class="fud-zone"><input class="fud-input" type="file"><svg class="fud-ico" viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#F5480F" stroke-width="1.8"><path d="M12 16V4m0 0l-4 4m4-4l4 4"/><path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"/></svg><span class="fud-txt">Sleep bestand hierheen of <b>blader</b></span></label>
</div>

/* Upload Dropzone · NedDev · eigen werk. */
.fud-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:320px;height:160px;box-sizing:border-box;padding:20px;background:#fff;border:2px dashed rgba(10,10,10,.2);border-radius:14px;cursor:pointer;text-align:center;font-family:'Switzer',sans-serif;transition:border-color .2s,background .2s,transform .2s}
.fud-zone.fud-over{border-color:#F5480F;background:rgba(245,72,15,.05);transform:scale(1.02)}
.fud-input{display:none}.fud-ico{transition:transform .25s}.fud-zone.fud-over .fud-ico{transform:translateY(-4px)}
.fud-txt{font-size:14px;color:rgba(10,10,10,.6)}.fud-txt b{color:#F5480F}

// Upload Dropzone · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.fud-zone')||root;var inp=root.querySelector('.fud-input'),txt=root.querySelector('.fud-txt');['dragenter','dragover'].forEach(function(e){root.addEventListener(e,function(ev){ev.preventDefault();root.classList.add('fud-over');});});['dragleave','drop'].forEach(function(e){root.addEventListener(e,function(ev){ev.preventDefault();root.classList.remove('fud-over');});});root.addEventListener('drop',function(ev){var f=ev.dataTransfer.files[0];if(f){inp.files=ev.dataTransfer.files;txt.innerHTML='<b>'+f.name+'</b>';}});inp.addEventListener('change',function(){if(inp.files[0])txt.innerHTML='<b>'+inp.files[0].name+'</b>';});
}
init(document.querySelector('.jouw-container'));