The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

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


user
Harun Ar 1 year ago
Metronic Laravel
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Albert Dexter 1 year ago
Deleted comment
user
Faizal Author 1 year ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation