How to extract & show the path of aem sites page properties thumbnail image dam asset

[SwarnarghyaBa]

Hello All, 

I am trying to extract the dam asset path & show it to a custom created read only text field dialog as soon as the user clicks on the "Select Image" button of the thumbnail tab & selects the thumbnail image from dam. To achieve this goal I have created a custom textfield dialog inside thumbnail tab pasting the xml as below: 

dialog structure:

<thumbnail
cq:showOnCreate="{Boolean}false"
jcr:primaryType="nt:unstructured"
jcr:title="Thumbnail"
sling:orderBefore="analytics"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items
jcr:primaryType="nt:unstructured"
sling:resourceSuperType="/libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/thumbnail/items/column/items">
<thumbnail
jcr:primaryType="nt:unstructured"
sling:hideChildren="upload"
sling:resourceType="cq/gui/components/common/wcm/pagethumbnail"
page="${empty param.item ? requestPathInfo.suffix : param.item}"
quiet="{Boolean}true"/>
<dampath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel=" DAM Path"
name="./dampath"
readOnly="{Boolean}true"
renderReadOnly="{Boolean}true"/>
</items>
</column>
</items>
</thumbnail>

i have also created a clintlibs folder & has written the below js 
js written in clientlibs for page component: 

document.addEventListener('DOMContentLoaded', function () {
const selectImageButton = document.querySelector('.js-browse-activator');
const damPathInput = document.querySelector('input[name="./dampath"]');

// Exit early if fields not found
if (!selectImageButton || !damPathInput) return;

selectImageButton.addEventListener('click', function () {
const thumbnailImage = document.querySelector('.cq-wcm-pagethumbnail-image');
const hiddenFileReference = document.querySelector('input[name="./image/fileReference"]');

console.log("thumbnail Image value:", thumbnailImage);
console.log("hidden file reference:", hiddenFileReference);

if (!hiddenFileReference) return;

// Immediately set if value exists
if (hiddenFileReference.value) {
damPathInput.value = hiddenFileReference.value;
}

// Set up observer to watch for changes in fileReference
const observer = new MutationObserver(() => {
const damValue = hiddenFileReference.value;
if (damValue) {
damPathInput.value = damValue;
}
});

observer.observe(hiddenFileReference, { attributes: true, attributeFilter: ['value'] });
});
});

The js is giving the asset path as below : 
Expected Result:

Issue with the code: 
The issue with my implementation is this js is only working after I am opening the page properties & then after I am selecting the thumbnail image the Dam Path is still showing the older path until I click on the Select Image button again, then only dam path is showing the correct path and after that working as expected, but the expectation is once I select the thumbnail image after opening page properties going to the tab selecting from the dam the path should could get update correctly in real time. I do not have to click on the "Select Image" button again. 

Can you kindly suggest what I am doing wrong in my implementation. 

[konstantyn_diachenko]

Hi @SwarnarghyaBa ,

Try this script:

document.addEventListener('DOMContentLoaded', function () {
    const pageThumbnail = document.querySelector('.cq-wcm-pagethumbnail');
    const pageThumbnailInput = document.querySelector('input.cq-wcm-pagethumbnail-hidden');
    const damPathInput = document.querySelector('input[name="./dampath"]');

    if (!pageThumbnail || !damPathInput) return;

    if (pageThumbnailInput) {
        damPathInput.value = pageThumbnailInput.value;
    }

    const observer = new MutationObserver(mutationRecord => {
        if (!mutationRecord || mutationRecord.length === 0) return;
        const target = mutationRecord[0].target;
        if (target.classList.contains('cq-wcm-pagethumbnail-hidden') && target.value) {
            damPathInput.value = target.value;
        }
    });
    observer.observe(pageThumbnail, {
        attributes: true,
        attributeFilter: ["value"]
    });
});

I start an observer once document is ready and try to set path from the hidden input field to your custom input on the initial load.

[SwarnarghyaBa]

Hello @konstantyn_diachenko  Thank you very much for reaching out , I tried to execute the js you have provided but the issue is the code is not working as expected & while I tried to debug this using breakpoints in js the lines inside the conditional if block is not getting executed. 

Can you kindly tell if is there anything I am missing here. 

[konstantyn_diachenko · Accepted solution]

Hi @SwarnarghyaBa ,

Please ensure that page properties page tab has the following selectors:
- cq-wcm-pagethumbnail-hidden - this is an input where page thumbnail file reference is stored

- cq-wcm-pagethumbnail - this is a selector of the page thumbnail field 

Could you please say what exactly is not executing?

[Shashi_Mulugu]

@SwarnarghyaBa as @konstantyn_diachenko said issue with attaching mutation observer.. this being setup on button click.. so there is always chance that first event is missed. Better to setup mutation observer on page load, after coral UI dialog is loaded..

$(document).on("foundation-contentloaded", function(e) {

        if (e.target.tagName === 'CORAL-DIALOG' && $(e.target).find('.cq-wcm-pagethumbnail').length) {

             initializeDamPathObserver();

        }

    });

full code: 

(function(document, $) {

    "use strict";

    function updateDamPath(hiddenFileReference, damPathInput) {

        if (hiddenFileReference && damPathInput) {

            damPathInput.value = hiddenFileReference.value || '';

        }

    }

    function initializeDamPathObserver() {

        const thumbnailWrapper = document.querySelector('.cq-wcm-pagethumbnail');

        if (!thumbnailWrapper) return;

        const hiddenFileReference = thumbnailWrapper.querySelector('input[name="./image/fileReference"]');

        const damPathInput = document.querySelector('input[name="./dampath"]');

        if (!hiddenFileReference || !damPathInput) return;

        updateDamPath(hiddenFileReference, damPathInput);

        const observer = new MutationObserver(() => {

            updateDamPath(hiddenFileReference, damPathInput);

        });

        observer.observe(hiddenFileReference, { attributes: true, attributeFilter: ['value'] });

    }

    $(document).on("foundation-contentloaded", function(e) {

        if (e.target.tagName === 'CORAL-DIALOG' && $(e.target).find('.cq-wcm-pagethumbnail').length) {

             initializeDamPathObserver();

        }

    });

})(document, jQuery);

[kautuk_sahni]

@SwarnarghyaBa Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!