<div class="container py-5 d-flex justify-content-center">
  <div class="card bsdz-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-1 text-center">Upload files</h5>
      <p class="text-muted small mb-3 text-center">Max 2&nbsp;MB per file.</p>

      <div class="bsdz-drop text-center p-4 mb-3" id="bsdzDrop">
        <div class="fs-3 mb-2">&#8593;</div>
        <p class="mb-1 fw-semibold">Drag &amp; drop files here</p>
        <p class="small text-muted mb-0">or click to browse</p>
        <input type="file" id="bsdzInput" class="d-none" multiple>
      </div>

      <div class="small text-danger mb-2 d-none" id="bsdzError"></div>

      <ul class="list-group" id="bsdzList"></ul>
    </div>
  </div>
</div>

.bsdz-card { width: 420px; border: 1px solid #eceef1; border-radius: 14px; }
.bsdz-drop { border: 2px dashed #c9cdd3; border-radius: 10px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.bsdz-drop.bsdz-dragover { background-color: #f0f6ff; border-color: #0d6efd; }
#bsdzList:not(:empty) { margin-top: .5rem; }
.bsdz-remove { cursor: pointer; color: #adb5bd; }
.bsdz-remove:hover { color: #dc3545; }

const MAX_SIZE = 2 * 1024 * 1024; // 2 MB
const drop = document.getElementById('bsdzDrop');
const input = document.getElementById('bsdzInput');
const list = document.getElementById('bsdzList');
const errorBox = document.getElementById('bsdzError');

let files = [];

function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

function showError(message) {
  errorBox.textContent = message;
  errorBox.classList.remove('d-none');
}

function clearError() {
  errorBox.classList.add('d-none');
  errorBox.textContent = '';
}

function render() {
  list.innerHTML = '';
  files.forEach((file, index) => {
    const item = document.createElement('li');
    item.className = 'list-group-item d-flex justify-content-between align-items-center';
    item.innerHTML =
      '<span class="text-truncate me-2">' + file.name + '</span>' +
      '<span class="d-flex align-items-center gap-2">' +
        '<span class="badge text-bg-light">' + formatSize(file.size) + '</span>' +
        '<span class="bsdz-remove" data-index="' + index + '">&times;</span>' +
      '</span>';
    list.appendChild(item);
  });
}

// Adds valid files to the running list and rejects oversized ones with a
// visible error, without discarding files already accepted in the batch.
function addFiles(fileList) {
  clearError();
  const rejected = [];
  Array.from(fileList).forEach(file => {
    if (file.size > MAX_SIZE) {
      rejected.push(file.name);
      return;
    }
    files.push(file);
  });
  if (rejected.length) {
    showError(rejected.join(', ') + (rejected.length > 1 ? ' exceed' : ' exceeds') + ' the 2 MB limit and were not added.');
  }
  render();
}

drop.addEventListener('click', () => input.click());

input.addEventListener('change', () => {
  addFiles(input.files);
  input.value = '';
});

['dragenter', 'dragover'].forEach(evt => {
  drop.addEventListener(evt, e => {
    e.preventDefault();
    drop.classList.add('bsdz-dragover');
  });
});

['dragleave', 'drop'].forEach(evt => {
  drop.addEventListener(evt, e => {
    e.preventDefault();
    if (evt === 'dragleave' && e.target !== drop) return;
    drop.classList.remove('bsdz-dragover');
  });
});

drop.addEventListener('drop', e => {
  e.preventDefault();
  if (e.dataTransfer && e.dataTransfer.files.length) {
    addFiles(e.dataTransfer.files);
  }
});

list.addEventListener('click', e => {
  const target = e.target.closest('.bsdz-remove');
  if (!target) return;
  const index = Number(target.dataset.index);
  files.splice(index, 1);
  render();
});