Basic Demo

Allowed file types: png, jpg, jpeg.

						<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

Allowed file types: png, jpg, jpeg.

						<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

Allowed file types: png, jpg, jpeg.

						<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

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

						<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

Default empty input with blank image

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

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

Select A Demo