Logo
Stockholm-icons / Media / Equalizer Created with Sketch.

Quick Actions

23 new tasks
Stockholm-icons / Shopping / Sale2 Created with Sketch. Accounting eCommerce
Stockholm-icons / Home / Globe Created with Sketch. Management Company Reports
Stockholm-icons / Shopping / Box2 Created with Sketch. Projects Completed Tasks
Stockholm-icons / Communication / Group Created with Sketch. Members Latest joinings
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Keen Image Input

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'
							});
						});
2024© Keenthemes
About Team Contact

User Profile 15 messages

Ryan Smith
Art Director
Stockholm-icons / Communication / Mail-notification Created with Sketch. ryan@keen.com
Stockholm-icons / Communication / Adress-book2 Created with Sketch.
My Account
Profile info update
Stockholm-icons / General / Settings-1 Created with Sketch.
My Tasks
Todo and tasks
Stockholm-icons / General / Half-star Created with Sketch.
My Events
Logs and notifications
Stockholm-icons / Communication / Mail-opened Created with Sketch.
My Statements
latest tasks and projects
Sign Out
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

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
AH
Andreas Hawks Python Developer
+23% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SC
Sarah Connor HTML, CSS. jQuery
-34% Stockholm-icons / Navigation / Angle-right Created with Sketch.
Pic
Amanda Harden UI/UX, Art Director
+72% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SR
Sean Robbins UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
JT
Jason Tatum ASP.NET Developer
+139% Stockholm-icons / Navigation / Angle-right Created with Sketch.

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
HTML RTL
Demo 2
HTML RTL
Demo 3
HTML RTL
Demo 4
HTML RTL
Demo 5
HTML RTL
Demo 6
HTML RTL
Demo 7
HTML RTL
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!