W3CoreUI

Avatar Input

A lightweight image upload and preview utility that allows users to easily update avatar or profile images. Upon clicking the upload icon, users can select a new image file, which is instantly displayed as a preview before submission.

Basic Element

A simple circular avatar with a hidden file input and a top-right upload icon to change the profile image.


<div class="avatar avatar-xl  shadow-sm rounded-circle position-relative avatar-input">
  <img class="avatar-preview w-100 h-100" src="assets/images/placeholder.jpg" alt="Avatar">

  <input type="file" class="upload-input d-none" accept=".png, .jpg, .jpeg">

  <!-- Upload Button -->
  <a href="javascript:void(0);" class="avatar avatar-xs rounded-circle position-absolute top-0 end-0 bg-white shadow-sm upload-trigger">
    <i class="fa-solid fa-pen"></i>
  </a>

</div>

Circle Element

Fully rounded avatar with both upload and remove buttons, allowing users to update or clear their profile picture easily.


<div class="avatar avatar-xl rounded-circle position-relative avatar-input">
  <img class="avatar-preview w-100 h-100" src="assets/images/avatar/large/avatar7.webp" alt="Avatar">

  <input type="file" class="upload-input d-none" accept=".png, .jpg, .jpeg">

  <!-- Upload Button -->
  <a href="javascript:void(0);" class="avatar avatar-xs rounded-circle position-absolute bottom-0 end-0 bg-white shadow-sm upload-trigger">
    <i class="fa-solid fa-upload"></i>
  </a>

  <!-- Remove Button -->
  <a href="javascript:void(0);" class="avatar avatar-xs rounded-circle bg-white shadow-sm remove-avatar position-absolute top-0 end-0">
    <i class="fa-solid fa-xmark"></i>
  </a>
</div>

Square Element

Square-shaped avatar preview featuring corner-positioned upload and remove icons for image selection and reset functionality.


<div class="avatar avatar-xl position-relative avatar-input">
  <img class="avatar-preview w-100 h-100" src="assets/images/avatar/large/avatar4.webp" alt="Avatar">

  <input type="file" class="upload-input d-none" accept=".png, .jpg, .jpeg">

  <!-- Upload Button -->
  <a href="javascript:void(0);" class="avatar avatar-xs position-absolute bottom-0 end-0 bg-white shadow-sm upload-trigger">
    <i class="fa-solid fa-upload"></i>
  </a>

  <!-- Remove Button -->
  <a href="javascript:void(0);" class="avatar avatar-xs rounded-circle bg-white shadow-sm remove-avatar position-absolute top-0 start-100 translate-middle mt-1 me-1">
    <i class="fa-solid fa-xmark"></i>
  </a>
</div>

Custom Element

Full-width avatar preview with visible "Upload" and "Remove" buttons below, designed for flexible or form-based layouts.

Uplaod Remove


<div class="row">
  <div class="col-lg-3">
    <div class="position-relative avatar-input">
      <img class="avatar-preview w-100 h-100 rounded-1" src="assets/images/avatar/large/avatar7.webp" alt="Avatar">

      <input type="file" class="upload-input d-none" accept=".png, .jpg, .jpeg">
			
      <div class="d-flex">

        <!-- Upload Button -->
        <a href="javascript:void(0);" class="btn btn-info light upload-trigger mt-3 me-2 w-50">Uplaod</a>

        <!-- Remove Button -->
        <a href="javascript:void(0);" class="btn btn-danger light remove-avatar mt-3 w-50">Remove</a>
			
      </div>
    </div>
  </div>
</div>