registerCallback with selectImage stopped working

[Arsenalist]

This is in react:

  import EmailEditor, { UnlayerOptions } from "react-email-editor";

  ...

  const internalOnReady = () => {
    emailEditorRef.current.editor.registerCallback("selectImage", (a, b) =>
      console.log("registering callback"),
    );
  };

  ...

<EmailEditor ref={emailEditorRef} onReady={internalOnReady} />

The selectImage callback is not called when clicking the Image upload button. This used to work fine a few days ago.

[realirfanashraf]

If you're looking to upload an image , you can use the 'image' option instead of 'selectImage'. This allows you to handle image uploads. You can refer to the (https://docs.unlayer.com/docs/custom-file-storage) for detailed instructions.

[Arsenalist]

Thank you, I believe the code you posted is for changing the storage of the image, not replacing the picker.

I want to replace the image picker and uploader. The code I posted above was working perfectly fine until recently, but now selectImage event seems to have no effect. Keep in mind that I am on the free version but again this worked perfectly fine.

[realirfanashraf]

You're very welcome!

[Arsenalist]

So is there a way to still replace the picker?

[realirfanashraf]

I'm unsure about that; my requirement was to upload the images to my server instead of Unlayer's.

[pnp-os]

@realirfanashraf I was facing the similar issue, Resolved this by adding a proper null check on loadDesign function. Calling loadDesign with empty data is throwing NPE internally.

[Keshavdulal]

@pnp-os are you using a paid version? Seems like unlayer moved custom storage, and image library to paid version.
My custom image storage was working previously, but recently stopped working.
https://unlayer.com/pricing

[roy-rayyone]

@Arsenalist @Keshavdulal
Using version 1.157.0 seems to fix the issue. It will load this editor: https://editor.unlayer.com/1.157.0/editor.html instead of the latest version. Hopefully they don't remove this version :)

<EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} options={{version: '1.157.0'}} />

[pnp-os]

@Arsenalist @Keshavdulal Using version 1.157.0 seems to fix the issue. It will load this editor: https://editor.unlayer.com/1.157.0/editor.html instead of the latest version. Hopefully they don't remove this version :)

<EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} options={{version: '1.157.0'}} />

Thanks a lot @roy-rayyone its working with this version change.

[realirfanashraf]

@roy-rayyone Thanks a lot! It's working perfectly now.

[mark-gogoro]

@Arsenalist @Keshavdulal Using version 1.157.0 seems to fix the issue. It will load this editor: https://editor.unlayer.com/1.157.0/editor.html instead of the latest version. Hopefully they don't remove this version :)

<EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} options={{version: '1.157.0'}} />

I can not get it to work with the solution.
I used the codesandbox to create an example as the link below, would you be so kind as to have a look
The exmaple

[roy-rayyone]

@Arsenalist @Keshavdulal Using version 1.157.0 seems to fix the issue. It will load this editor: https://editor.unlayer.com/1.157.0/editor.html instead of the latest version. Hopefully they don't remove this version :)

<EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} options={{version: '1.157.0'}} />

I can not get it to work with the solution. I used the codesandbox to create an example as the link below, would you be so kind as to have a look The exmaple

Try this @mark-gogoro

emailEditorRef.current.editor.registerCallback(
      "image",
      selectImageCallback
    );

[mark-gogoro]

Try this

emailEditorRef.current.editor.registerCallback(
      "image",
      selectImageCallback
    );

Hi @roy-rayyone
thanks for your code, but I still could not make it work (Code Example)

when a user clicks the Upload Image Button or drops a new image to the drop zone that should trigger the selectImageCallback function.

[realirfanashraf]

Try this

emailEditorRef.current.editor.registerCallback(
      "image",
      selectImageCallback
    );

Hi @roy-rayyone thanks for your code, but I still could not make it work (Code Example)

when a user clicks the Upload Image Button or drops a new image to the drop zone that should trigger the selectImageCallback function.

use onLoad over onReady it will work

[mark-gogoro]

Try this

emailEditorRef.current.editor.registerCallback(
      "image",
      selectImageCallback
    );

Hi @roy-rayyone thanks for your code, but I still could not make it work (Code Example)
when a user clicks the Upload Image Button or drops a new image to the drop zone that should trigger the selectImageCallback function.

use onLoad over onReady it will work

thanks for your reply

I use onLoad over onReady as below
`
const onLoad = () => {
const {
current: { editor },
} = emailEditorRef;

// # selectImage
// - for click the Upload Image button, and click the drop area
editor.registerCallback("selectImage", selectImageCallback);

// # image
// - For drag and drop an image
// - This works when a user drags and drops an image
editor.registerCallback("image", selectImageCallback);
};
`

the selectImageCallback event can not be triggered
when a user clicks the Upload Image button OR the Drop a new image

but
the image with registerCallback did trigger the selectImageCallback event
when a user drags and drops an image into the Drop a new image