Unable to render image in multifield

[Sanjana12]

I'm trying to render image in multifield. I used the path 

cq/gui/components/authoring/dialog/fileupload

but still it's not working. Please help 

[Ganthimathi_R]

Hi @Sanjana12 

Please verify this post and your dialog xml as below,

<fileupload
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    autoStart="{Boolean}false"
    class="cq-droptarget"
    fieldLabel="Image asset"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
    multiple="{Boolean}false"
    name="./file"
    title="Upload Image Asset"
    uploadUrl="${suffix.path}"
    useHTML5="{Boolean}true"/>

[Sanjana12]

mine is the same but the image is still not getting displayed on the page

[Ganthimathi_R]

@Sanjana12 

Refer this documentation.

Are you able to verify the image getting saved in content node of the page? 

[Sanjana12]

yes the image is getting saved in jcr:properties

[Ganthimathi_R]

@Sanjana12 

Could you please share your code here to verify.

[Sanjana12 · Accepted solution]

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="My Multifield"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/tabs"
                    maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Properties"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                    margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">

                                            <well
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/well"
                                                    fieldLabel="Link">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <details
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                            composite="{Boolean}true"
                                                            fieldLabel="Details">
                                                        <field
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                                                name="./multifield">
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <column
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                                                    <items jcr:primaryType="nt:unstructured">
                                                                        <country
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                                fieldLabel="Country"
                                                                                name="./country"/>
                                                                        <description
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                                fieldLabel="Description"
                                                                                name="./description"/>
                                                                        <fileupload
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                                                                allowUpload="{Boolean}false"
                                                                                autoStart="{Boolean}false"
                                                                                class="cq-droptarget"
                                                                                fieldLabel="Image"
                                                                                fileNameParameter="./fileName"
                                                                                fileReferenceParameter="./fileReference"
                                                                                mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/svg+xml]"
                                                                                multiple="{Boolean}false"
                                                                                name="./fileName"
                                                                                title="Upload an image asset:"
                                                                                uploadUrl="${suffix.path}"
                                                                                useHTML5="{Boolean}true"/>
                                                                        <label
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                                fieldLabel="Button Label"
                                                                                name="./label"/>
                                                                        <link
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                                                fieldLabel="Button Link"
                                                                                name="./link"/>

                                                                    </items>
                                                                </column>
                                                            </items>
                                                        </field>
                                                    </details>

                                                </items>
                                            </well>


                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[Sanjana12]

<sly data-sly-use.model="com.secondsite.core.models.Data"/>
 <sly data-sly-list.item="${model.details.listChildren}">

<img src="${item.fileReference}"  style="float: right" class="imagestyle">

[ksh_ingole7]

Hi @Sanjana12 

Kindly confirm if you are able to see :

1. fileReference property in the /content/<component-path> and is it having the expected DAM path.

If yes,

Try to debug the Java code. See if the list that you are trying to return has the fileReference path as expected.

Thanks

[Sanjana12]

the fileReference path in the java code is correct

[Ganthimathi_R]

@Sanjana12 

Did you verify the src="${item.fileReference}" has the proper image? 

[Sanjana12]

yes

[Ganthimathi_R]

@Sanjana12 Are you seeing any error in log?