Image Input · Panel

Avatar

Profile photo — click to upload or change

<div class="flex flex-col items-center gap-3">
  <div class="mv-image-input size-24" data-mv-image-input="true">
    <input type="file" accept=".png, .jpg, .jpeg" name="avatar" /><input
      type="hidden"
      name="avatar_remove"
    /><button
      type="button"
      data-mv-tooltip="true"
      data-mv-tooltip-trigger="hover"
      data-mv-tooltip-placement="right"
      data-mv-image-input-remove="true"
      class="mv-image-input-remove"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-x"
        aria-hidden="true"
      >
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path></svg
      ><span data-mv-tooltip-content="true" class="mv-tooltip"
        >Remove avatar</span
      >
    </button>
    <div
      data-mv-image-input-placeholder="true"
      class="mv-image-input-placeholder"
      style="background-image: url(/media/avatars/blank.png)"
    >
      <div
        data-mv-image-input-preview="true"
        class="mv-image-input-preview"
        style="background-image: url(/media/avatars/300-1.png)"
      ></div>
      <div
        class="flex items-center justify-center cursor-pointer h-5 left-0 right-0 bottom-0 bg-black/25 absolute"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="14"
          height="12"
          viewBox="0 0 14 12"
          class="fill-gray-100 opacity-80"
        >
          <path
            d="M11.6665 2.64585H11.2232C11.0873 2.64749 10.9538 2.61053 10.8382 2.53928C10.7225 2.46803 10.6295 2.36541 10.5698 2.24335L10.0448 1.19918C9.91266 0.931853 9.70808 0.707007 9.45438 0.550249C9.20068 0.393491 8.90806 0.311121 8.60984 0.312517H5.38984C5.09162 0.311121 4.799 0.393491 4.5453 0.550249C4.2916 0.707007 4.08701 0.931853 3.95484 1.19918L3.42984 2.24335C3.37021 2.36541 3.27716 2.46803 3.1615 2.53928C3.04584 2.61053 2.91234 2.64749 2.7765 2.64585H2.33317C1.90772 2.64585 1.49969 2.81486 1.19885 3.1157C0.898014 3.41654 0.729004 3.82457 0.729004 4.25002V10.0834C0.729004 10.5088 0.898014 10.9168 1.19885 11.2177C1.49969 11.5185 1.90772 11.6875 2.33317 11.6875H11.6665C12.092 11.6875 12.5 11.5185 12.8008 11.2177C13.1017 10.9168 13.2707 10.5088 13.2707 10.0834V4.25002C13.2707 3.82457 13.1017 3.41654 12.8008 3.1157C12.5 2.81486 12.092 2.64585 11.6665 2.64585ZM6.99984 9.64585C6.39413 9.64585 5.80203 9.46624 5.2984 9.12973C4.79478 8.79321 4.40225 8.31492 4.17046 7.75532C3.93866 7.19572 3.87802 6.57995 3.99618 5.98589C4.11435 5.39182 4.40602 4.84613 4.83432 4.41784C5.26262 3.98954 5.80831 3.69786 6.40237 3.5797C6.99644 3.46153 7.61221 3.52218 8.1718 3.75397C8.7314 3.98576 9.2097 4.37829 9.54621 4.88192C9.88272 5.38554 10.0623 5.97765 10.0623 6.58335C10.0608 7.3951 9.73765 8.17317 9.16365 8.74716C8.58965 9.32116 7.81159 9.64431 7 9.64585Z"
          ></path>
          <path
            d="M7 8.77087C8.20812 8.77087 9.1875 7.7915 9.1875 6.58337C9.1875 5.37525 8.20812 4.39587 7 4.39587C5.79188 4.39587 4.8125 5.37525 4.8125 6.58337C4.8125 7.7915 5.79188 8.77087 7 8.77087Z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <p class="text-sm text-muted-foreground">
    Profile photo — click to upload or change
  </p>
</div>

With Remove

Cover image

Upload a new image, then use the remove control to revert to the placeholder or clear the selection. The component adds changed and empty classes automatically.

Default preview

<div class="max-w-sm space-y-4">
  <div class="space-y-1">
    <div class="text-sm font-medium text-mono">Cover image</div>
    <p class="text-xs text-muted-foreground">
      Upload a new image, then use the remove control to revert to the
      placeholder or clear the selection. The component adds
      <code class="text-foreground">changed</code> and<!-- -->
      <code class="text-foreground">empty</code> classes automatically.
    </p>
  </div>
  <div
    class="mv-image-input inline-flex flex-col size-32 gap-3 rounded-lg"
    data-mv-image-input="true"
  >
    <input type="file" accept=".png, .jpg, .jpeg" name="cover" /><input
      type="hidden"
      name="cover_remove"
    />
    <div class="relative size-32">
      <button
        type="button"
        data-mv-tooltip="true"
        data-mv-tooltip-trigger="hover"
        data-mv-tooltip-placement="top"
        data-mv-image-input-remove="true"
        class="mv-image-input-remove"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path></svg
        ><span data-mv-tooltip-content="true" class="mv-tooltip"
          >Remove or revert image</span
        >
      </button>
      <div
        data-mv-image-input-placeholder="true"
        class="mv-image-input-placeholder rounded-lg"
        style="background-image: url(/media/avatars/blank.png)"
      >
        <div
          data-mv-image-input-preview="true"
          class="mv-image-input-preview rounded-lg"
          style="background-image: url(/media/avatars/300-5.png)"
        ></div>
        <div
          class="flex items-center justify-center cursor-pointer h-6 left-0 right-0 bottom-0 bg-black/30 absolute rounded-b-lg"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-rotate-ccw size-3.5 text-white opacity-90"
            aria-hidden="true"
          >
            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
            <path d="M3 3v5h5"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap gap-2 text-xs">
      <span
        class="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 mv-image-input-changed:hidden mv-image-input-empty:hidden"
        ><span class="size-2 rounded-full bg-muted-foreground/40"></span>Default
        preview</span
      ><span
        class="hidden items-center gap-1 rounded-md border border-border px-2 py-1 mv-image-input-changed:inline-flex"
        ><span class="size-2 rounded-full bg-primary"></span>Changed</span
      ><span
        class="hidden items-center gap-1 rounded-md border border-border px-2 py-1 mv-image-input-empty:inline-flex"
        ><span class="size-2 rounded-full bg-muted-foreground"></span
        >Empty</span
      >
    </div>
  </div>
</div>

Form

<form class="mv-form max-w-md">
  <div class="mv-form-item">
    <label class="mv-form-label" for="profile-photo">Profile photo</label>
    <div class="mv-form-control">
      <div class="mv-image-input" data-mv-image-input="true">
        <input
          id="profile-photo"
          type="file"
          accept=".png, .jpg, .jpeg"
          name="profile_photo"
        /><input type="hidden" name="profile_photo_remove" /><button
          type="button"
          data-mv-tooltip="true"
          data-mv-tooltip-trigger="hover"
          data-mv-tooltip-placement="right"
          data-mv-image-input-remove="true"
          class="mv-image-input-remove"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path></svg
          ><span data-mv-tooltip-content="true" class="mv-tooltip"
            >Click to remove or revert</span
          >
        </button>
        <div
          data-mv-image-input-placeholder="true"
          class="mv-image-input-placeholder"
          style="background-image: url(/media/avatars/blank.png)"
        >
          <div
            data-mv-image-input-preview="true"
            class="mv-image-input-preview"
            style="background-image: url(/media/avatars/300-2.png)"
          ></div>
          <div
            class="flex items-center justify-center cursor-pointer h-5 left-0 right-0 bottom-0 bg-black/25 absolute"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="12"
              viewBox="0 0 14 12"
              class="fill-gray-100 opacity-80"
            >
              <path
                d="M11.6665 2.64585H11.2232C11.0873 2.64749 10.9538 2.61053 10.8382 2.53928C10.7225 2.46803 10.6295 2.36541 10.5698 2.24335L10.0448 1.19918C9.91266 0.931853 9.70808 0.707007 9.45438 0.550249C9.20068 0.393491 8.90806 0.311121 8.60984 0.312517H5.38984C5.09162 0.311121 4.799 0.393491 4.5453 0.550249C4.2916 0.707007 4.08701 0.931853 3.95484 1.19918L3.42984 2.24335C3.37021 2.36541 3.27716 2.46803 3.1615 2.53928C3.04584 2.61053 2.91234 2.64749 2.7765 2.64585H2.33317C1.90772 2.64585 1.49969 2.81486 1.19885 3.1157C0.898014 3.41654 0.729004 3.82457 0.729004 4.25002V10.0834C0.729004 10.5088 0.898014 10.9168 1.19885 11.2177C1.49969 11.5185 1.90772 11.6875 2.33317 11.6875H11.6665C12.092 11.6875 12.5 11.5185 12.8008 11.2177C13.1017 10.9168 13.2707 10.5088 13.2707 10.0834V4.25002C13.2707 3.82457 13.1017 3.41654 12.8008 3.1157C12.5 2.81486 12.092 2.64585 11.6665 2.64585ZM6.99984 9.64585C6.39413 9.64585 5.80203 9.46624 5.2984 9.12973C4.79478 8.79321 4.40225 8.31492 4.17046 7.75532C3.93866 7.19572 3.87802 6.57995 3.99618 5.98589C4.11435 5.39182 4.40602 4.84613 4.83432 4.41784C5.26262 3.98954 5.80831 3.69786 6.40237 3.5797C6.99644 3.46153 7.61221 3.52218 8.1718 3.75397C8.7314 3.98576 9.2097 4.37829 9.54621 4.88192C9.88272 5.38554 10.0623 5.97765 10.0623 6.58335C10.0608 7.3951 9.73765 8.17317 9.16365 8.74716C8.58965 9.32116 7.81159 9.64431 7 9.64585Z"
              ></path>
              <path
                d="M7 8.77087C8.20812 8.77087 9.1875 7.7915 9.1875 6.58337C9.1875 5.37525 8.20812 4.39587 7 4.39587C5.79188 4.39587 4.8125 5.37525 4.8125 6.58337C4.8125 7.7915 5.79188 8.77087 7 8.77087Z"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div class="mv-form-description">
      JPG or PNG, max 1 MB. Used on your public profile.
    </div>
  </div>
</form>

Basic Usage

Pendiente de documentar.

<div class="mv-image-input" data-mv-image-input="true">
  <input type="file" accept=".png, .jpg, .jpeg" name="avatar" /><input
    type="hidden"
    name="avatar_remove"
  /><button
    type="button"
    data-mv-tooltip="true"
    data-mv-tooltip-trigger="hover"
    data-mv-tooltip-placement="right"
    data-mv-image-input-remove="true"
    class="mv-image-input-remove"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-x"
      aria-hidden="true"
    >
      <path d="M18 6 6 18"></path>
      <path d="m6 6 12 12"></path></svg
    ><span data-mv-tooltip-content="true" class="mv-tooltip"
      >Click to remove or revert</span
    >
  </button>
  <div
    data-mv-image-input-placeholder="true"
    class="mv-image-input-placeholder"
    style="background-image: url(/media/avatars/blank.png)"
  >
    <div
      data-mv-image-input-preview="true"
      class="mv-image-input-preview"
      style="background-image: url(/media/avatars/300-2.png)"
    ></div>
    <div
      class="flex items-center justify-center cursor-pointer h-5 left-0 right-0 bottom-0 bg-black/25 absolute"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="12"
        viewBox="0 0 14 12"
        class="fill-gray-100 opacity-80"
      >
        <path
          d="M11.6665 2.64585H11.2232C11.0873 2.64749 10.9538 2.61053 10.8382 2.53928C10.7225 2.46803 10.6295 2.36541 10.5698 2.24335L10.0448 1.19918C9.91266 0.931853 9.70808 0.707007 9.45438 0.550249C9.20068 0.393491 8.90806 0.311121 8.60984 0.312517H5.38984C5.09162 0.311121 4.799 0.393491 4.5453 0.550249C4.2916 0.707007 4.08701 0.931853 3.95484 1.19918L3.42984 2.24335C3.37021 2.36541 3.27716 2.46803 3.1615 2.53928C3.04584 2.61053 2.91234 2.64749 2.7765 2.64585H2.33317C1.90772 2.64585 1.49969 2.81486 1.19885 3.1157C0.898014 3.41654 0.729004 3.82457 0.729004 4.25002V10.0834C0.729004 10.5088 0.898014 10.9168 1.19885 11.2177C1.49969 11.5185 1.90772 11.6875 2.33317 11.6875H11.6665C12.092 11.6875 12.5 11.5185 12.8008 11.2177C13.1017 10.9168 13.2707 10.5088 13.2707 10.0834V4.25002C13.2707 3.82457 13.1017 3.41654 12.8008 3.1157C12.5 2.81486 12.092 2.64585 11.6665 2.64585ZM6.99984 9.64585C6.39413 9.64585 5.80203 9.46624 5.2984 9.12973C4.79478 8.79321 4.40225 8.31492 4.17046 7.75532C3.93866 7.19572 3.87802 6.57995 3.99618 5.98589C4.11435 5.39182 4.40602 4.84613 4.83432 4.41784C5.26262 3.98954 5.80831 3.69786 6.40237 3.5797C6.99644 3.46153 7.61221 3.52218 8.1718 3.75397C8.7314 3.98576 9.2097 4.37829 9.54621 4.88192C9.88272 5.38554 10.0623 5.97765 10.0623 6.58335C10.0608 7.3951 9.73765 8.17317 9.16365 8.74716C8.58965 9.32116 7.81159 9.64431 7 9.64585Z"
        ></path>
        <path
          d="M7 8.77087C8.20812 8.77087 9.1875 7.7915 9.1875 6.58337C9.1875 5.37525 8.20812 4.39587 7 4.39587C5.79188 4.39587 4.8125 5.37525 4.8125 6.58337C4.8125 7.7915 5.79188 8.77087 7 8.77087Z"
        ></path>
      </svg>
    </div>
  </div>
</div>