Avatar not displayed after selection after converting from HTML to ReactJS

Hello,

In https://preview.keenthemes.com/metronic8/demo1/account/settings.html the avatar is editable and according to the doc it should. However, When I attempted to convert the code from the HTML folder to ReactJS it just allowed me to select the image file but not display the selected image. When I ran the React version of the demo (http://localhost:3012/metronic8/react/demo1/crafted/account/settings) it simply did not display the avatar edit button at all.

Here is my converted code snippet:

{/* <!--begin::Image input--> */}
<div className="image-input image-input-empty image-input-outline mb-3" data-kt-image-input="true"
style={{ backgroundImage: `url(${process.env.PUBLIC_URL + '/media/svg/files/blank-image.svg'})` }}>
{/* <!--begin::Preview existing thumbnail--> */}
<div className="image-input-wrapper w-150px h-150px"></div>
{/* <!--end::Preview existing thumbnail--> */}
{/* <!--begin::Label--> */}
<label className="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change game thumbnail">
<i className="bi bi-pencil-fill fs-7"></i>
{/* <!--begin::Inputs--> */}
<input type="file" name="thumbnail" accept=".png, .jpg, .jpeg"/>
<input type="hidden" name="thumbnail_remove" />
{/* <!--end::Inputs--> */}
</label>
{/* <!--end::Label--> */}

// ... other code snippet


Am I missing something obvious here? Please advise. 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  :(

Replies (3)

Could anyone help look at this, please? I've been blocked here for a couple of days. Thanks!

Hi,

You can reuse this solution, besides the HTML code, you need to initialize an ImageInputComponent you can do it inside useEffect() react hook.

import { ImageInputComponent } from "../../../_metronic/assets/ts/components";


useEffect(() => {
ImageInputComponent.createInstances();
}, [])

Works like a charm, thank you~

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  :(