ファイルアップロードドロップゾーン

<div class="d04-02-12-wrap">
          <label class="d04-02-12-drop" for="d04-02-12-file">
            <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4M12 4l-4 4M12 4l4 4"/><path d="M4 16v3a2 2 0 002 2h12a2 2 0 002-2v-3"/></svg>
            <span class="d04-02-12-msg">ここにファイルをドラッグ、またはクリックして選択</span>
            <span class="d04-02-12-file">選択されていません</span>
            <input id="d04-02-12-file" type="file" hidden>
          </label>
        </div>

.d04-02-12-wrap{width:min(300px,100%)}
        .d04-02-12-drop{
          display:flex;flex-direction:column;align-items:center;gap:8px;
          padding:26px 16px;border:2px dashed #c3c9d4;border-radius:12px;
          color:#8a93a3;cursor:pointer;text-align:center;background:#fafbfc;
          transition:border-color .25s,background .25s,color .25s;
        }
        .d04-02-12-drop:hover,.d04-02-12-drop.is-drag{border-color:#4a6cf7;background:#eef2ff;color:#4a6cf7}
        .d04-02-12-msg{font-size:12.5px}
        .d04-02-12-file{font-size:11px;color:#aab0bd}
        .d04-02-12-drop.is-drag .d04-02-12-file{color:#4a6cf7}

(function(){
        var wrap=document.querySelector('.d04-02-12-wrap');
        if(!wrap)return;
        var drop=wrap.querySelector('.d04-02-12-drop');
        var input=wrap.querySelector('input[type="file"]');
        var label=wrap.querySelector('.d04-02-12-file');
        ['dragenter','dragover'].forEach(function(evt){
          drop.addEventListener(evt,function(e){e.preventDefault();drop.classList.add('is-drag');});
        });
        ['dragleave','drop'].forEach(function(evt){
          drop.addEventListener(evt,function(e){e.preventDefault();drop.classList.remove('is-drag');});
        });
        drop.addEventListener('drop',function(e){
          var files=e.dataTransfer && e.dataTransfer.files;
          if(files && files.length){ label.textContent=files[0].name; }
        });
        input.addEventListener('change',function(){
          if(input.files && input.files.length){ label.textContent=input.files[0].name; }
        });
      })();