Bootstrap Duplicate File Detection on Upload — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsdupe-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">Attach files</label>
      <input type="file" class="form-control mb-2" id="bsdupeInput" multiple>
      <p class="small mb-3 d-none" id="bsdupeWarning"></p>
      <ul class="list-unstyled mb-0" id="bsdupeList"></ul>
    </div>
  </div>
</div>

.bsdupe-card { width: 400px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bsdupeWarning { color: #b45309; background: #fffbeb; padding: 8px 10px; border-radius: 8px; }
.bsdupe-item { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid #f1f2f5; }
.bsdupe-item:last-child { border-bottom: none; }

const input = document.getElementById('bsdupeInput');
const warning = document.getElementById('bsdupeWarning');
const list = document.getElementById('bsdupeList');

let added = [];

// A cheap but effective duplicate signature: real content hashing would need
// to read every file's bytes, which is overkill here — name + size + last
// modified time together are extremely unlikely to collide for two genuinely
// different files someone is attaching to the same form.
function signature(file) {
  return file.name + '::' + file.size + '::' + file.lastModified;
}

function render() {
  list.innerHTML = added.map(f =>
    '<li class="bsdupe-item"><span>' + f.name + '</span><span class="text-muted">' + Math.round(f.size / 1024) + ' KB</span></li>'
  ).join('') || '<li class="bsdupe-item text-muted">No files attached yet.</li>';
}

input.addEventListener('change', () => {
  const incoming = Array.from(input.files);
  const existingSignatures = new Set(added.map(signature));
  const duplicates = [];

  incoming.forEach(file => {
    const sig = signature(file);
    if (existingSignatures.has(sig)) {
      duplicates.push(file.name);
    } else {
      existingSignatures.add(sig);
      added.push(file);
    }
  });

  if (duplicates.length) {
    warning.textContent = (duplicates.length === 1 ? 'Skipped duplicate: ' : 'Skipped duplicates: ') + duplicates.join(', ');
    warning.classList.remove('d-none');
  } else {
    warning.classList.add('d-none');
  }

  render();
  input.value = '';
});

render();