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 ?
Solved! Go to Solution.
Views
Replies
Total Likes
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);
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);
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
});