Metronic | Metronic Image Input

Basic Demo

Example Label

Allowed file types: png, jpg, jpeg.

HTML
JS


      <div class="image-input image-input-outline" id="kt_image_1">
       <div class="image-input-wrapper" style="background-image: url(assets/media/users/100_1.jpg)"></div>

       <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
        <i class="fa fa-pen icon-sm text-muted"></i>
        <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
        <input type="hidden" name="profile_avatar_remove"/>
       </label>

       <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
        <i class="ki ki-bold-close icon-xs text-muted"></i>
       </span>
      </div>


      var avatar1 = new KTImageInput('kt_image_1');

Non-outline Style

Example Label

Allowed file types: png, jpg, jpeg.

HTML
JS


      <div class="image-input" id="kt_image_2">
       <div class="image-input-wrapper" style="background-image: url(assets/media/users/100_2.jpg)"></div>

       <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
        <i class="fa fa-pen icon-sm text-muted"></i>
        <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
        <input type="hidden" name="profile_avatar_remove"/>
       </label>

       <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
        <i class="ki ki-bold-close icon-xs text-muted"></i>
       </span>
      </div>


      var avatar2 = new KTImageInput('kt_image_2');

Circle Style

Example Label

Allowed file types: png, jpg, jpeg.

HTML
JS


      <div class="image-input image-input-outline image-input-circle" id="kt_image_3">
       <div class="image-input-wrapper" style="background-image: url(assets/media/users/100_3.jpg)"></div>

       <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
        <i class="fa fa-pen icon-sm text-muted"></i>
        <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
        <input type="hidden" name="profile_avatar_remove"/>
       </label>

       <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
        <i class="ki ki-bold-close icon-xs text-muted"></i>
       </span>
      </div>


      var avatar3 = new KTImageInput('kt_image_3');

Editable Input

Example Label

After image removal hidden input's value is set to "1"

HTML
JS


      <div class="image-input image-input-outline" id="kt_image_4" style="background-image: url(assets/media/>users/blank.png)">
       <div class="image-input-wrapper" style="background-image: url(<?php echo Page::getMediaPath();?>users/100_1.jpg)"></div>

       <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
        <i class="fa fa-pen icon-sm text-muted"></i>
        <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
        <input type="hidden" name="profile_avatar_remove"/>
       </label>

       <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
        <i class="ki ki-bold-close icon-xs text-muted"></i>
       </span>

       <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="remove" data-toggle="tooltip" title="Remove avatar">
        <i class="ki ki-bold-close icon-xs text-muted"></i>
       </span>
      </div>


      var avatar4 = new KTImageInput('kt_image_4');

      avatar4.on('cancel', function(imageInput) {
       swal.fire({
        title: 'Image successfully canceled !',
        type: 'success',
        buttonsStyling: false,
        confirmButtonText: 'Awesome!',
        confirmButtonClass: 'btn btn-primary font-weight-bold'
       });
      });

      avatar4.on('change', function(imageInput) {
       swal.fire({
        title: 'Image successfully changed !',
        type: 'success',
        buttonsStyling: false,
        confirmButtonText: 'Awesome!',
        confirmButtonClass: 'btn btn-primary font-weight-bold'
       });
      });

      avatar4.on('remove', function(imageInput) {
       swal.fire({
        title: 'Image successfully removed !',
        type: 'error',
        buttonsStyling: false,
        confirmButtonText: 'Got it!',
        confirmButtonClass: 'btn btn-primary font-weight-bold'
       });
      });

Empty Input

Example Label

Default empty input with blank image

HTML
JS


      <div class="image-input image-input-empty image-input-outline" id="kt_image_5" style="background-image: url(assets/media/users/blank.png)">
       <div class="image-input-wrapper"></div>

       <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
        <i class="fa fa-pen icon-sm text-muted"></i>
        <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
        <input type="hidden" name="profile_avatar_remove"/>
       </label>

       <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
        <i class="ki ki-bold-close icon-xs text-muted"></i>
       </span>

       <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="remove" data-toggle="tooltip" title="Remove avatar">
        <i class="ki ki-bold-close icon-xs text-muted"></i>
       </span>
      </div>


      var avatar5 = new KTImageInput('kt_image_5');

      avatar5.on('cancel', function(imageInput) {
       swal.fire({
        title: 'Image successfully changed !',
        type: 'success',
        buttonsStyling: false,
        confirmButtonText: 'Awesome!',
        confirmButtonClass: 'btn btn-primary font-weight-bold'
       });
      });

      avatar5.on('change', function(imageInput) {
       swal.fire({
        title: 'Image successfully changed !',
        type: 'success',
        buttonsStyling: false,
        confirmButtonText: 'Awesome!',
        confirmButtonClass: 'btn btn-primary font-weight-bold'
       });
      });

      avatar5.on('remove', function(imageInput) {
       swal.fire({
        title: 'Image successfully removed !',
        type: 'error',
        buttonsStyling: false,
        confirmButtonText: 'Got it!',
        confirmButtonClass: 'btn btn-primary font-weight-bold'
       });
      });

Quick Actions

Pricing Tables

Wizards

Invoices

Login

Classic Login

Error Pages

Metronic Image Input

Basic Demo

Non-outline Style

Circle Style

Editable Input

Empty Input

Notifications 24 New

User Profile 12 messages

Recent Notifications

System Messages

Notifications

Customer Care

Reports

Memebers

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Demo 10

Demo 11

Demo 12

Demo 13

Demo 14

Demo 15

Demo 16

Demo 17

Demo 18

Demo 19

Demo 20

Demo 21

Demo 22

Demo 23

Demo 24

Demo 25

Demo 26

Demo 27

Demo 28

Demo 29

Demo 30