How to create multi image component with image preview In adobe cq5? - aem

Question

I want to build a component in which user can drag & drop two images from content finder. For this i created another tab in my dialog but when i am authoring the component its showing the 1st tab image in both div's. Can you please tell me where i'm wrong here is my code.
dialog.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
activeTab="{Long}0"
helpPath="en/cq/current/wcm/default_components.html#Image"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<image
jcr:primaryType="cq:Widget"
cropParameter="./imageCrop"
ddGroups="[media]"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mapParameter="./imageMap"
name="./file"
requestSuffix=".img.png"
rotateParameter="./imageRotate"
title="Image"
xtype="html5smartimage"/>
<advanced
jcr:primaryType="cq:Widget"
title="Advanced"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<title
jcr:primaryType="cq:Widget"
fieldLabel="Title"
name="./jcr:title"
xtype="textfield"/>
<alt
jcr:primaryType="cq:Widget"
fieldDescription="(leave empty to use the title defined above)"
fieldLabel="Alt Text"
name="./alt"
xtype="textfield"/>
<linkURL
jcr:primaryType="cq:Widget"
fieldDescription="Drop files or pages from the Content Finder"
fieldLabel="Link to"
name="./linkURL"
xtype="pathfield"/>
<description
jcr:primaryType="cq:Widget"
fieldLabel="Description"
name="./jcr:description"
xtype="textarea"/>
<size
jcr:primaryType="cq:Widget"
fieldLabel="Size"
heightParameter="./height"
widthParameter="./width"
xtype="sizefield"/>
</items>
</advanced>
<image4
jcr:primaryType="cq:Widget"
cropParameter="./image4Crop"
ddGroups="[media]"
fileNameParameter="./image4/fileName"
fileReferenceParameter="./image4/fileReference"
mapParameter="./imageMap"
name="./image4/file"
requestSuffix=".img.png"
rotateParameter="./image4/imageRotate"
title="Image"
xtype="html5smartimage"/>
</items>
</jcr:root>
image.jsp is
<%# page import="com.day.cq.commons.Doctype,
com.day.cq.wcm.api.components.DropTarget,
com.day.cq.wcm.foundation.Image" %><%
%><%#include file="/libs/foundation/global.jsp"%><%
Image image = new Image(resource);
//drop target css class = dd prefix + name of the drop target in the edit config
image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image");
image.loadStyleData(currentStyle);
image.setSelector(".img"); // use image script
image.setDoctype(Doctype.fromRequest(request));
Image image4 = new Image(resource);
//drop target css class = dd prefix + name of the drop target in the edit config
image4.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image4");
image4.loadStyleData(currentStyle);
image4.setSelector(".img"); // use image script
image4.setDoctype(Doctype.fromRequest(request));
// add design information if not default (i.e. for reference paras)
if (!currentDesign.equals(resourceDesign)) {
image.setSuffix(currentDesign.getId());
}
String divId = "cq-image-jsp-" + resource.getPath();
%><div id="<%= divId %>"><% image.draw(out); %></div><%
%><cq:text property="jcr:description" placeholder="" tagName="small" escapeXml="true"/>
<div id="<%= divId %>"><% image4.draw(out); %></div>
<%#include file="/libs/foundation/components/image/tracking-js.jsp"%>

Answer 1

I ran into a problem like this using with multiple images within the dialog. You might check the resourceType after you save the images in CRXDE to make sure they both have a resourceType property set. If either images are missing this property you can add the property using a hidden widget. Reference https://forums.adobe.com/message/4623838 for more
<resType1
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./file/sling:resourceType"
value="foundation/components/image"
xtype="hidden"/>
<resType2
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./image4/sling:resourceType"
value="foundation/components/image"
xtype="hidden"/>