Bootstrap File Upload With Progress — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsprog-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">Upload a document</label>
      <input type="file" class="form-control mb-3" id="bsprogInput">

      <div class="d-none" id="bsprogRow">
        <div class="d-flex justify-content-between small mb-1">
          <span id="bsprogName">&nbsp;</span>
          <span id="bsprogPercent">0%</span>
        </div>
        <div class="progress mb-2" style="height:8px;">
          <div class="progress-bar" id="bsprogBar" role="progressbar" style="width:0%"></div>
        </div>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-sm btn-outline-secondary" id="bsprogCancel">Cancel</button>
          <button type="button" class="btn btn-sm btn-outline-danger d-none" id="bsprogRetry">Retry</button>
        </div>
      </div>
      <p class="small mt-3 mb-0" id="bsprogStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bsprog-card { width: 400px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bsprogBar.bg-danger { background-color: #dc3545 !important; }
#bsprogStatus.text-success { color: #198754 !important; }
#bsprogStatus.text-danger { color: #dc3545 !important; }

const input = document.getElementById('bsprogInput');
const row = document.getElementById('bsprogRow');
const name = document.getElementById('bsprogName');
const percent = document.getElementById('bsprogPercent');
const bar = document.getElementById('bsprogBar');
const cancelBtn = document.getElementById('bsprogCancel');
const retryBtn = document.getElementById('bsprogRetry');
const status = document.getElementById('bsprogStatus');

let timer = null;
let currentFile = null;
let cancelled = false;

function reset() {
  clearInterval(timer);
  timer = null;
}

function startUpload(file) {
  currentFile = file;
  cancelled = false;
  reset();
  row.classList.remove('d-none');
  retryBtn.classList.add('d-none');
  cancelBtn.classList.remove('d-none');
  bar.classList.remove('bg-danger');
  name.textContent = file.name;
  status.textContent = '';
  status.className = 'small mt-3 mb-0';

  let progress = 0;
  timer = setInterval(() => {
    progress += Math.random() * 18;
    if (progress >= 100) {
      progress = 100;
      bar.style.width = '100%';
      percent.textContent = '100%';
      reset();
      cancelBtn.classList.add('d-none');
      status.textContent = file.name + ' uploaded successfully.';
      status.className = 'small mt-3 mb-0 text-success fw-semibold';
      return;
    }
    bar.style.width = progress + '%';
    percent.textContent = Math.round(progress) + '%';
  }, 250);
}

input.addEventListener('change', () => {
  if (input.files && input.files[0]) startUpload(input.files[0]);
});

cancelBtn.addEventListener('click', () => {
  cancelled = true;
  reset();
  bar.classList.add('bg-danger');
  cancelBtn.classList.add('d-none');
  retryBtn.classList.remove('d-none');
  status.textContent = 'Upload cancelled.';
  status.className = 'small mt-3 mb-0 text-danger fw-semibold';
});

retryBtn.addEventListener('click', () => {
  if (currentFile) startUpload(currentFile);
});