Avatar Upload — Profile Picture Preview Snippet

<div class="au" id="auCard">
  <div class="au-banner"></div>
  <div class="au-body">
    <label class="au-ring" title="Upload a profile photo">
      <input type="file" class="au-input" accept="image/*" aria-label="Upload a profile photo">
      <img class="au-img" alt="Your profile photo" hidden>
      <span class="au-placeholder">
        <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      </span>
      <span class="au-drop">Drop here</span>
      <span class="au-edit">
        <svg viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
      </span>
    </label>

    <h2 class="au-name">Profile photo</h2>
    <p class="au-hint" id="auHint">Drag &amp; drop or browse. JPG, PNG or WebP, up to 5 MB.</p>
    <p class="au-error" id="auError" role="alert" hidden></p>

    <div class="au-actions">
      <button type="button" class="au-btn" id="auPick">Upload photo</button>
      <button type="button" class="au-remove" hidden>Remove</button>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 10%, #e0e7ff, transparent 45%), #f1f5f9;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.au {
  width: 100%; max-width: 340px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(30, 41, 59, 0.14), 0 2px 6px rgba(30, 41, 59, 0.06);
  text-align: center;
}
.au-banner {
  height: 96px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #ec4899);
}
.au-body { padding: 0 28px 28px; }

/* Avatar ring sits half over the banner */
.au-ring {
  position: relative;
  width: 124px; height: 124px;
  margin: -62px auto 16px;
  border-radius: 50%;
  background: #eef2ff;
  border: 5px solid #fff;
  box-shadow: 0 0 0 2px #c7d2fe, 0 10px 24px rgba(79, 70, 229, 0.25);
  display: grid; place-items: center;
  cursor: pointer; overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.au-ring:hover { transform: scale(1.03); box-shadow: 0 0 0 2px #818cf8, 0 12px 28px rgba(79, 70, 229, 0.32); }
.au-ring:focus-within { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.45), 0 10px 24px rgba(79, 70, 229, 0.25); }

.au-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.au-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.au-placeholder svg { width: 46px; height: 46px; fill: none; stroke: #818cf8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Hover overlay with the camera icon */
.au-edit {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(30, 27, 75, 0.5);
  opacity: 0; transition: opacity 0.2s;
}
.au-edit svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au-ring:hover .au-edit { opacity: 1; }

/* Shown only while a file is dragged over the card */
.au-drop {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(99, 102, 241, 0.88);
  color: #fff; font-size: 13px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.au.dragging .au-drop { opacity: 1; }
.au.dragging .au-ring { transform: scale(1.06); }

.au-ring.has-img .au-placeholder { display: none; }

.au-name { font-size: 19px; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
.au-hint { font-size: 13px; line-height: 1.5; color: #64748b; margin: 6px 0 0; }
.au-error { font-size: 13px; font-weight: 600; color: #dc2626; background: #fef2f2; border-radius: 10px; padding: 8px 12px; margin-top: 12px; }

.au-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.au-btn {
  font: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  border: none; border-radius: 12px; padding: 10px 20px; cursor: pointer;
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.au-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(99, 102, 241, 0.42); }
.au-btn:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.4); outline-offset: 2px; }
.au-remove {
  font: inherit; font-size: 14px; font-weight: 600; color: #475569;
  background: #f1f5f9; border: none; border-radius: 12px; padding: 10px 16px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.au-remove:hover { background: #fee2e2; color: #dc2626; }

function initAvatarUpload() {
  const card = document.querySelector('.au');
  if (!card) return;                       // not mounted yet
  const ring = card.querySelector('.au-ring');
  const input = card.querySelector('.au-input');
  const img = card.querySelector('.au-img');
  const pickBtn = card.querySelector('.au-btn');
  const removeBtn = card.querySelector('.au-remove');
  const hint = card.querySelector('.au-hint');
  const error = card.querySelector('.au-error');
  const MAX_BYTES = 5 * 1024 * 1024;       // 5 MB
  const DEFAULT_HINT = hint.textContent;
  let currentUrl = null;

  function formatSize(bytes) {
    return bytes < 1048576 ? Math.round(bytes / 1024) + ' KB' : (bytes / 1048576).toFixed(1) + ' MB';
  }

  function showError(msg) { error.textContent = msg; error.hidden = false; }

  function setFile(file) {
    error.hidden = true;
    if (!file.type.startsWith('image/')) return showError('Please choose an image file.');
    if (file.size > MAX_BYTES) return showError('That image is ' + formatSize(file.size) + '. Max size is 5 MB.');
    if (currentUrl) URL.revokeObjectURL(currentUrl);
    currentUrl = URL.createObjectURL(file);     // instant local preview, no upload
    img.src = currentUrl;
    img.hidden = false;
    ring.classList.add('has-img');
    hint.textContent = file.name + ' · ' + formatSize(file.size);
    pickBtn.textContent = 'Change photo';
    removeBtn.hidden = false;
  }

  input.addEventListener('change', () => { if (input.files[0]) setFile(input.files[0]); });
  pickBtn.addEventListener('click', () => input.click());

  removeBtn.addEventListener('click', () => {
    if (currentUrl) { URL.revokeObjectURL(currentUrl); currentUrl = null; }
    input.value = '';
    img.hidden = true; img.removeAttribute('src');
    ring.classList.remove('has-img');
    hint.textContent = DEFAULT_HINT;
    pickBtn.textContent = 'Upload photo';
    error.hidden = true;
    removeBtn.hidden = true;
  });

  // Drag and drop anywhere on the card
  ['dragenter', 'dragover'].forEach((t) => card.addEventListener(t, (e) => {
    e.preventDefault(); card.classList.add('dragging');
  }));
  ['dragleave', 'drop'].forEach((t) => card.addEventListener(t, (e) => {
    e.preventDefault();
    if (t === 'dragleave' && card.contains(e.relatedTarget)) return;
    card.classList.remove('dragging');
  }));
  card.addEventListener('drop', (e) => {
    const file = e.dataTransfer.files[0];
    if (!file) return;
    try { input.files = e.dataTransfer.files; } catch (err) {}   // keeps the file in the form
    setFile(file);
  });
}

// Run after the DOM mounts (framework exports run snippet JS before render)
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initAvatarUpload);
else requestAnimationFrame(initAvatarUpload);