Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo

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

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9