Image Upload with Preview

<input type="file" id="imageInput" accept="image/*" onchange="previewImage(event)">
<div id="previewContainer" style="margin-top:10px"></div>
<script>
function previewImage(event) {
  const file = event.target.files[0];
  if (!file) return;
  if (!file.type.startsWith("image/")) { alert("Please select an image file"); event.target.value = ""; return; }
  const maxSize = 2 * 1024 * 1024;
  if (file.size > maxSize) { alert("Image must be under 2MB"); event.target.value = ""; return; }
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById("previewContainer").innerHTML =
      `<img src="${e.target.result}" style="max-width:300px;border-radius:8px;border:1px solid #ddd">`;
  };
  reader.readAsDataURL(file);
}
</script>