Second Image with fileupload doesn't render in a multifield component - AEM 6.5

Avatar

Avatar

lwang

Avatar

lwang

lwang

19-10-2020

Hello everyone, 

 

I need to create two image uploads in my hero image component. Both need to be drag and drop images. 

1. Background image for the hero image

2. A logo image on top of the background image. (Which can be multiple)

 

I used sling:resourceType= "granite/ui/components/foundation/form/fileupload"  for the hero background image and 

sling:resourceType="cq/gui/components/authoring/dialog/fileupload" for the logo image. 
 
They both worked in the dialog ( I can drag and drop the images there). However, when I close the dialog, only the hero image shows up on the page. The logo image doesn't render on the page. 
 
This is what I have for logo image: 
<item-image
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fileNameParameter="./logoImgName"
fileReferenceParameter="./logoReference"
mimeTypes="[image]"
multiple="{Boolean}false"
fieldLabel="Logo"
name="./logoImage"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
 
Hero image is basically the same - just different names, etc. 
Does anyone know how to make it work?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Manjunath_K

Avatar

Manjunath_K

Manjunath_K

19-10-2020

Hi @lwang 

Its working fine for me in AEM 6.5 i.e. added 2 fileupload(having same sling:resourceType "cq/gui/components/authoring/dialog/fileupload") in multifield, configured images are getting store as expected & able to access image path using "fileReferenceParameter". can you please share complete dialog xml & also is there any reason why you are using two different resourceType here.

 

replace "granite/ui/components/foundation/form/fileupload" by "cq/gui/components/authoring/dialog/fileupload" as highlighted below then it will store & retrieve image in multifield as expected.

 

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="FHS Hero"

sling:resourceType="cq/gui/components/authoring/dialog"

extraClientlibs="[fhs-hero.authoring.dialog]">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

margin="{Boolean}true"/>

<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="Global Config"

sling:resourceType="granite/ui/components/coral/foundation/well">

<items jcr:primaryType="nt:unstructured">

<bg-color

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"

fieldLabel=" Background Color"

fieldDescription="Enter or choose the Hex color for the background of the hero. Required for Mobile view even if desktop will only have image."

name="./bgColor"

required="{Boolean}true"/>

<bg-img

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

autoStart="{Boolean}false"

class="cq-droptarget"

fieldDescription="Drop in an image that will act as the background for the hero."

fieldLabel="Background Image"

fileNameParameter="./bgImgName"

fileReferenceParameter="./bgImg"

mimeTypes="[image]"

multiple="{Boolean}false"

name="./bgImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<logos

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="{Boolean}true"

fieldLabel="Logos">

<field

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container"

name="./logos">

<items jcr:primaryType="nt:unstructured">

<well

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/well">

<items jcr:primaryType="nt:unstructured">

<item-image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

autoStart="{Boolean}false"

class="cq-droptarget"

fileNameParameter="./image/logoImgName"

fileReferenceParameter="./logoReference"

mimeTypes="[image]"

multiple="{Boolean}false"

fieldLabel="Logo"

name="./logoImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<alt-text

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Supply text for screen readers describing image."

fieldLabel="Logo Image Alternative Text"

name="./logoAltText"/>

</items>

</well>

</items>

</field>

</logos>

</items>

</properties>

</items>

</tabs>

</items>

</content>

</jcr:root>

 

 

Hi @Manjunath_K

 

Thanks for the response. 

 

Here is the complete code

 

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="FHS Hero"

    sling:resourceType="cq/gui/components/authoring/dialog"

    extraClientlibs="[fhs-hero.authoring.dialog]">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

            margin="{Boolean}true"/>

        <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="Global Config"

                        sling:resourceType="granite/ui/components/coral/foundation/well">

                        <items jcr:primaryType="nt:unstructured">

                            <bg-color

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"

                                fieldLabel=" Background Color"

                                fieldDescription="Enter or choose the Hex color for the background of the hero.  Required for Mobile view even if desktop will only have image."

                                name="./bgColor"

                                required="{Boolean}true"/>

                            <bg-img

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/fileupload"

                                allowUpload="{Boolean}false"

                                autoStart="{Boolean}false"

                                class="cq-droptarget"

                                fieldDescription="Drop in an image that will act as the background for the hero."

                                fieldLabel="Background Image"

                                fileNameParameter="./bgImgName"

                                fileReferenceParameter="./bgImg"

                                mimeTypes="[image]"

                                multiple="{Boolean}false"

                                name="./bgImage"

                                title="Upload Image Asset"

                                uploadUrl="${suffix.path}"

                                useHTML5="{Boolean}true"/>

<logos

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

                                composite="{Boolean}true"

                                fieldLabel="Logos">

                                <field

                                    jcr:primaryType="nt:unstructured"

                                    sling:resourceType="granite/ui/components/coral/foundation/container"

                                    name="./logos">

                                    <items jcr:primaryType="nt:unstructured">

                                        <well

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/coral/foundation/well">

                                            <items jcr:primaryType="nt:unstructured">

                                                <item-image

                                                        jcr:primaryType="nt:unstructured"

                                                        sling:resourceType="granite/ui/components/foundation/form/fileupload"

                                                        autoStart="{Boolean}false"

                                                        class="cq-droptarget"

                                                        fileNameParameter="./image/logoImgName"

                                                        fileReferenceParameter="./logoReference"

                                                        mimeTypes="[image]"

                                                        multiple="{Boolean}false"

                                                        fieldLabel="Logo"

                                                        name="./logoImage"

                                                        title="Upload Image Asset"

                                                        uploadUrl="${suffix.path}"

                                                        useHTML5="{Boolean}true"/>

                                                <alt-text

                                                        jcr:primaryType="nt:unstructured"

                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                        fieldDescription="Supply text for screen readers describing image."

                                                        fieldLabel="Logo Image Alternative Text"

                                                        name="./logoAltText"/>

                                            </items>

                                        </well>

                                    </items>

                                </field>

                            </logos>

                        </items>

                    </properties>

                </items>

            </tabs>

        </items>

    </content>

</jcr:root>

 

I had two sling resource type because the first time it would work for me when I first implemented this. Even when changed to the same, the second image still doesn't render. Thanks. 

Hi @lwang 

I tried to reproduce the issue using dialog xml which you shared & even for me images are not shown in multifield after save & opening dialog. its because of resourceType which you have added for fileupload. so, replace "granite/ui/components/foundation/form/fileupload" by "cq/gui/components/authoring/dialog/fileupload" both for Background Image & Logo as highlighted below then it will store & retrieve image in multifield as expected.

 

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="FHS Hero"

sling:resourceType="cq/gui/components/authoring/dialog"

extraClientlibs="[fhs-hero.authoring.dialog]">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<layout

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

margin="{Boolean}true"/>

<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="Global Config"

sling:resourceType="granite/ui/components/coral/foundation/well">

<items jcr:primaryType="nt:unstructured">

<bg-color

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"

fieldLabel=" Background Color"

fieldDescription="Enter or choose the Hex color for the background of the hero. Required for Mobile view even if desktop will only have image."

name="./bgColor"

required="{Boolean}true"/>

<bg-img

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

autoStart="{Boolean}false"

class="cq-droptarget"

fieldDescription="Drop in an image that will act as the background for the hero."

fieldLabel="Background Image"

fileNameParameter="./bgImgName"

fileReferenceParameter="./bgImg"

mimeTypes="[image]"

multiple="{Boolean}false"

name="./bgImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<logos

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="{Boolean}true"

fieldLabel="Logos">

<field

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container"

name="./logos">

<items jcr:primaryType="nt:unstructured">

<well

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/well">

<items jcr:primaryType="nt:unstructured">

<item-image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

autoStart="{Boolean}false"

class="cq-droptarget"

fileNameParameter="./image/logoImgName"

fileReferenceParameter="./logoReference"

mimeTypes="[image]"

multiple="{Boolean}false"

fieldLabel="Logo"

name="./logoImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<alt-text

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Supply text for screen readers describing image."

fieldLabel="Logo Image Alternative Text"

name="./logoAltText"/>

</items>

</well>

</items>

</field>

</logos>

</items>

</properties>

</items>

</tabs>

</items>

</content>

</jcr:root>

 

Answers (1)

Answers (1)

Avatar

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

20-10-2020

Hi @lwang 

Image widget granite/ui/components/foundation/form/fileupload will not work directly in multifield. You need to write a custom listener to load and submit the multifield value. Refer below link

http://experience-aem.blogspot.com/2016/06/aem-62-touch-ui-composite-image-multifield.html

 

Use cq/gui/components/authoring/dialog/fileupload to avoid writing custom js. Refer below documentation.

https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/granite-ui...

 

AG