Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Custom Component

Avatar

Level 2

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 ?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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);

 

 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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);

 

 

Avatar

Community Advisor

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



Arun Patidar