Bootstrap Avatar Upload Editor — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsavatar-card">
    <div class="card-body p-4 text-center">
      <div class="bsavatar-circle mb-3" id="bsavatarCircle">
        <span id="bsavatarInitials">PN</span>
        <img id="bsavatarImg" class="d-none" alt="Profile photo">
      </div>

      <input type="file" accept="image/*" class="d-none" id="bsavatarInput">
      <div class="d-flex justify-content-center gap-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bsavatarChange">Change photo</button>
        <button type="button" class="btn btn-sm btn-outline-danger d-none" id="bsavatarRemove">Remove</button>
      </div>

      <button type="button" class="btn btn-dark btn-sm fw-bold mt-3 d-none" id="bsavatarSave">Save changes</button>
      <p class="small text-muted mt-3 mb-0" id="bsavatarStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bsavatar-card { width: 320px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsavatar-circle {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto;
  background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 26px system-ui, sans-serif; overflow: hidden; position: relative;
}
.bsavatar-circle img { width: 100%; height: 100%; object-fit: cover; }

const input = document.getElementById('bsavatarInput');
const initials = document.getElementById('bsavatarInitials');
const imgEl = document.getElementById('bsavatarImg');
const changeBtn = document.getElementById('bsavatarChange');
const removeBtn = document.getElementById('bsavatarRemove');
const saveBtn = document.getElementById('bsavatarSave');
const status = document.getElementById('bsavatarStatus');

let objectUrl = null;
let dirty = false;

function markDirty() {
  dirty = true;
  saveBtn.classList.remove('d-none');
  status.textContent = '';
}

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

input.addEventListener('change', () => {
  const file = input.files && input.files[0];
  if (!file) return;
  if (objectUrl) URL.revokeObjectURL(objectUrl);
  objectUrl = URL.createObjectURL(file);
  imgEl.src = objectUrl;
  imgEl.classList.remove('d-none');
  initials.classList.add('d-none');
  removeBtn.classList.remove('d-none');
  markDirty();
});

removeBtn.addEventListener('click', () => {
  if (objectUrl) { URL.revokeObjectURL(objectUrl); objectUrl = null; }
  imgEl.src = '';
  imgEl.classList.add('d-none');
  initials.classList.remove('d-none');
  removeBtn.classList.add('d-none');
  input.value = '';
  markDirty();
});

saveBtn.addEventListener('click', () => {
  dirty = false;
  saveBtn.classList.add('d-none');
  status.textContent = 'Profile photo saved.';
  status.className = 'small text-success mt-3 mb-0';
});