Expand my Community achievements bar.

Custom Component


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 ?

2 Replies


Level 8

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

                change="function(field, value) { 
                    var img = Ext.getCmp('image-preview'); 


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);
})(jQuery, Granite.author);




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 :



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



Arun Patidar