ファイルドラッグ&ドロップアップロード

<div class="d04-03-05-drop">
          <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 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"/>
          </svg>
          <p class="d04-03-05-txt">ここにファイルをドラッグ&ドロップ</p>
          <input type="file" class="d04-03-05-input" multiple>
          <ul class="d04-03-05-list"></ul>
        </div>

.d04-03-05-drop{
          position:relative;width:min(280px,100%);padding:26px 16px;text-align:center;
          border:2px dashed #c3c9d4;border-radius:12px;color:#8a93a3;
          transition:border-color .2s,background .2s;
        }
        .d04-03-05-drop.is-over{border-color:#4a6cf7;background:#eef2ff;color:#4a6cf7}
        .d04-03-05-txt{margin:10px 0 0;font-size:13px}
        .d04-03-05-input{
          position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
        }
        .d04-03-05-list{
          position:relative;margin:12px 0 0;padding:0;list-style:none;
          text-align:left;font-size:12px;color:#445;
        }
        .d04-03-05-list li{padding:4px 8px;background:#f3f5f9;border-radius:6px;margin-top:6px}

(function(){
        var drop=document.querySelector('.d04-03-05-drop');
        if(!drop)return;
        var input=drop.querySelector('.d04-03-05-input');
        var list=drop.querySelector('.d04-03-05-list');
        function render(files){
          list.innerHTML='';
          Array.prototype.slice.call(files).forEach(function(f){
            var li=document.createElement('li');
            li.textContent=f.name;
            list.appendChild(li);
          });
        }
        ['dragenter','dragover'].forEach(function(ev){
          drop.addEventListener(ev,function(e){
            e.preventDefault();
            drop.classList.add('is-over');
          });
        });
        ['dragleave','drop'].forEach(function(ev){
          drop.addEventListener(ev,function(e){
            e.preventDefault();
            drop.classList.remove('is-over');
          });
        });
        drop.addEventListener('drop',function(e){
          if(e.dataTransfer&&e.dataTransfer.files.length)render(e.dataTransfer.files);
        });
        input.addEventListener('change',function(){
          if(input.files.length)render(input.files);
        });
      })();