Custom Component

[Neha_Jadhav]

I have created one dropdown component having two option IMG1 & IMG2 . On selection of IMG1 Option specified image (/content/dam/demo/sampleImage1.jpg) should get rendered in the dialog box of the component and On selection of IMG2 Option specified image (/content/dam/demo/sampleImage2.jpg) should get rendered. I have tried adding JS things but I didn't got expected result .Could anyone tell me how can we do it ?

[sherinregi · Accepted solution]

Hi @Neha_Jadhav 

The ideal way is to use the OOTB fileupload resource for any image(cq/gui/components/authoring/dialog/fileupload) It can load the preview for the image on the dialog. Here instead of dropdown if you can alter the implementation that would work.

But if you still want the preview based on dropdown you can add custom javascript and listen to the onchange event .

on Dialog

<listeners
                jcr:primaryType="nt:unstructured"
                change="function(field, value) { 
                    var img = Ext.getCmp('image-preview'); 
                    img.setSrc(value); 
                }"/>

custom js 

(function($, ns) {
    $(document).on("foundation-contentloaded", function() {
        var imageField = $('#image-preview');
        var previewImage = $('#image-preview-img');
        
        imageField.on('change', function() {
            var file = this.files[0];
            var reader = new FileReader();
            
            reader.onload = function(e) {
                previewImage.attr('src', e.target.result);
            };
            
            reader.readAsDataURL(file);
        });
    });
})(jQuery, Granite.author);

[arunpatidar]

Hi @Neha_Jadhav 
I did not do exactly the same but I created a js to show image in the field description.

you can take inspiration from it and add images in the dialog :

https://aemlab.blogspot.com/2021/05/aem-touch-ui-component-dialog-fielddescription-image.html 

You can try Coral Cart card well

var card = new Coral.Card().set({
  asset: {
    innerHTML: "<img src=\"https://fastly.picsum.photos/id/894/200/300.jpg?hmac=yPKW_JRjZMfmYXpao6QL5LEt2cYJQdesD-zkL-U-UJs\">"
  },
  assetWidth: 100,
  assetHeight: 150
});

https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Card....