Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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...


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(