Dialog Coral UI Issue - Changing field to "fileupload"

Hello ​@NageshRaja , a few questions here:

1. what do you see in the authoring dialog? is it the thumbnail of the component?
2. Should your logic not be doing, if there is no heroImagefileReference then pick up the value from heroImage?
3. I would like to understand why you want to read fileReference as that is handled by AEM Image servlet, so it will try to populate some value as a default value.

Maybe you can share the code from dialog and the sling model, then I can have a better clarity at the issue.

Regards,

Ramkumar

Hi ​@NageshRaja 

What you're seeing is expected with this setup:

• The fileupload/Remote Asset Picker + Image V3 pattern always previews via the image servlet > it generates …/componentNameA.img.png?... and expects a valid fileReference (DAM/remote asset).
• Your fallback logic (heroImage > old 3rd‑party URL) lives only in the Sling Model / view and is not used by that servlet.
• So:
  • View / publish: your Sling Model returns heroImage > <img src="https://media-www.abc.com/test.png"> => works.
  • Authoring dialog: the preview still calls …componentNameA.img.png > servlet sees empty fileReference => broken image.

That's why manually changing src to the heroImage URL fixes it: you're bypassing the *.img.png servlet.

Stop using the *.img.png URL for the legacy case and always drive src from your model.

Concretely:

1. In your Sling Model, expose a single, effective URL:

public String getEffectiveSrc() {
    if (StringUtils.isNotBlank(fileReference)) {
        // new remote DAM / Image V3 path (let core image logic handle it)
        return fileReference; 
    }
    // legacy 3rd‑party URL
    return heroImage;
}

2.In your component HTL/JSP, do not render …componentNameA.img.png when you rely on fallback.

Instead, bind the img to the model:

<img src="${imageModel.effectiveSrc @ context='uri'}"
     alt="${imageModel.altText}"
     title="${imageModel.altText}" />

• Remove/avoid patterns like: <img src="${resource.path}.img.png" ...>
• or image.src when that resolves to *.img.png for the legacy branch.

3. Use this same markup for both:

• editor.html (author mode)
• page.html (view/publish)

Once the src is coming directly from getEffectiveSrc() everywhere:

• New content (with heroImagefileReference) still works as before.
• Old content (with only heroImage) renders correctly in both dialog and editor preview.
• No extra JS or GuideBridge, works fine with your Remote Asset + third‑party DAM mix.