ファイルアップロード File Upload

.demo-upload { max-width: 400px; }
.demo-upload-zone {
  border: 2px dashed #d1d5db; border-radius: 12px;
  padding: 32px 20px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.demo-upload-zone:hover, .demo-upload-zone.dragover {
  border-color: var(--ui-primary);
  background: color-mix(in srgb, var(--ui-primary) 5%, transparent);
}
.demo-upload-icon { color: #999; margin-bottom: 8px; }
.demo-upload-zone:hover .demo-upload-icon,
.demo-upload-zone.dragover .demo-upload-icon { color: var(--ui-primary); }
.demo-upload-text { font-size: 14px; color: #555; margin: 0 0 4px; }
.demo-upload-hint { font-size: 12px; color: #999; margin: 0; }
.demo-upload-browse { color: var(--ui-primary); font-weight: 600; }
.demo-upload-input { display: none; }
.demo-upload-files { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.demo-upload-file {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #f9fafb; border-radius: 8px; font-size: 13px;
}
.demo-upload-file-name { flex: 1; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-upload-file-size { color: #999; font-size: 11px; }
.demo-upload-file-remove { background: none; border: none; color: #999; cursor: pointer; font-size: 16px; }
.demo-upload-file-remove:hover { color: #ef4444; }

(function(){
  const zone = document.querySelector('.demo-upload-zone');
  const input = document.querySelector('.demo-upload-input');
  const filesEl = document.querySelector('.demo-upload-files');
  zone.addEventListener('click', () => input.click());
  zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('dragover'); });
  zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
  zone.addEventListener('drop', (e) => { e.preventDefault(); zone.classList.remove('dragover'); showFiles(e.dataTransfer.files); });
  input.addEventListener('change', () => showFiles(input.files));
  function showFiles(files) {
    filesEl.innerHTML = '';
    Array.from(files).forEach(f => {
      const size = f.size < 1024*1024 ? (f.size/1024).toFixed(1)+'KB' : (f.size/1024/1024).toFixed(1)+'MB';
      const div = document.createElement('div');
      div.className = 'demo-upload-file';
      div.innerHTML = '<span class="demo-upload-file-name">'+f.name+'</span><span class="demo-upload-file-size">'+size+'</span><button class="demo-upload-file-remove">&times;</button>';
      div.querySelector('.demo-upload-file-remove').addEventListener('click', () => div.remove());
      filesEl.appendChild(div);
    });
  }
})();