Custom Component

Question

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-1 · Accepted Answer

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 · Answer

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.html

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded