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

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"/>