I am facing problem to update the profile photo using the code.
Profile photo updating correctly using bellow code.
<div class="w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label flex items-center gap-1 max-w-56">Profile Photo</label>
<input class="input" type="file" name="profile_photo" />
<!-- Display current profile photo if it exists -->
@if($user->profile_photo)
<div class="mt-2">
<img src="{{ asset('storage/' . $user->profile_photo) }}" alt="Current Profile Photo" class="w-20 h-20 rounded-full">
</div>
@endif
</div>
</div>
But when I tried to use metronic code, it's not working.
<div class="w-full">
<div class="flex items-center flex-wrap gap-2.5">
<label class="form-label max-w-56">Photo</label>
<div class="flex items-center justify-between flex-wrap grow gap-2.5">
<span class="text-2sm text-gray-700">150x150px JPEG, PNG Image</span>
<div class="image-input size-16" data-image-input="true">
<!-- File Input for Profile Photo -->
<input accept=".png, .jpg, .jpeg" name="profile_photo" type="file" />
<!-- Hidden Input for Removing Profile Photo -->
<input name="profile_photo_remove" type="hidden" />
<!-- Remove Button -->
<div class="btn btn-icon btn-icon-xs btn-light shadow-default absolute z-1 size-5 -top-0.5 -end-0.5 rounded-full" data-image-input-remove="" data-tooltip="#image_input_tooltip" data-tooltip-trigger="hover">
<i class="ki-filled ki-cross"></i>
</div>
<!-- Tooltip for Remove Button -->
<span class="tooltip" id="image_input_tooltip">Click to remove or revert</span>
<!-- Profile Photo Preview -->
<div class="image-input-placeholder rounded-full border-2 border-success image-input-empty:border-gray-300" >
<div class="image-input-preview rounded-full" ></div>
<div class="flex items-center justify-center cursor-pointer h-5 left-0 right-0 bottom-0 bg-dark-clarity absolute"></div>
</div>
</div>
</div>
</div>
</div>
Please let me know, where is the problem is...
Replies (2)
Yeah, updating a profile photo with custom HTML usually works fine, but Metronic’s components add a lot of extra layers that can trip things up. When I was tweaking image previews for a small Mac-based project, I ran into similar confusion. I ended up testing everything using tools I found here https://setapp.com/how-to/best-photo-editing-software-for-mac . Surprisingly, some of those apps let me preview and export quick photo edits that made debugging UI issues easier. Might sound off-topic, but having a solid editor helps catch little UI mismatches early on. Just make sure your JS is initializing right and the image preview divs aren't clashing with your CSS.
Hi Harun
The issue with your code seems to be several structural and naming differences from the Metronic image input implementation.
https://gist.github.com/faizalmy/6ffd24390206deed3d287a5b2ecc3675
Key Changes Made:
- Followed the Metronic structure - Matched the HTML structure from the examples in your codebase
- Used correct data attributes - Added the proper data-kt-image-input-action attributes
- Used standard Metronic classes - Applied the width/height classes as per examples
- Added proper preview wrapper - Used the image-input-wrapper class for the preview
Also, make sure you have this JavaScript code to initialize the image input component:
// On document ready
document.addEventListener("DOMContentLoaded", function() {
// Initialize image inputs
KTImageInput.init();
});If you're still having issues after making these changes, check your browser console for any JavaScript errors.
Thanks
