1 | Keenthemes

Metronic Image Input

Actions

KTImageInput is Metronic's custom made plugin that provides an image attachment for form submitions with dynamic preview.

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'
							});
						});

Custom

Layout

CRUD

Features

Task Reports

Profit Margins

Staff Management

Tools

Metronic Image Input

Basic Demo

Non-outline Style

Circle Style

Editable Input

Empty Input

User Profile 12 messages

Recent Notifications

Shopping Cart

System Messages

Notifications

Customer Care

Reports

Memebers

Select A Demo

Custom

Layout

CRUD

Features

Task Reports

Profit Margins

Staff Management

Tools

User Notifications 23 new

Quick Actions

Metronic Image Input

Basic Demo

Non-outline Style

Circle Style

Editable Input

Empty Input

User Profile 12 messages

Recent Notifications

Shopping Cart

System Messages

Notifications

Customer Care

Reports

Memebers

Select A Demo