Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

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?
1 Accepted Solution

Avatar

Correct answer by
Level 8

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>

 

 

View solution in original post

7 Replies

Avatar

Correct answer by
Level 8

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>

 

 

Avatar

Level 2

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. 

Avatar

Level 8

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>

 

Avatar

Level 1

Hi @Manjunath_K,

 

I tried using your version but when you have multiple logos entered and you submit the form, the next time it is being opened it just shows the last logo. Also if the CRX the logos are not located under the multifield but on the resource node itself. 

 

Please find the screen shots below:

 

Multifield:

erges_k_2-1625246558844.png

 

 

CRXDE:

erges_k_3-1625246708284.png

 

Before submitting form:

erges_k_0-1625246390057.png

 

On reopening dialog:

erges_k_1-1625246427085.png

I am using AEM 6.5 but this approach does not seem working correctly. Am I missing something? 

 

 

Avatar

Community Advisor

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

Avatar

Level 1

Hi @Anudeep_Garnepudi,

 

I tried using the solution above but when you have multiple logos entered and you submit the form, the next time it is being opened it just shows the last logo. Also if the CRX the logos are not located under the multifield but on the resource node itself. 

 

Please find the screen shots below:

 

Multifield:

erges_k_0-1625767302242.png

 

 

 

CRXDE:

erges_k_1-1625767302246.png

 

 

Before submitting form:

erges_k_2-1625767302248.png

 

 

On reopening dialog:

erges_k_3-1625767302250.png

I am using AEM 6.5 but this approach does not seem working correctly. Am I missing something? 

Avatar

Level 6

@lwang : Please check the thread below for the reference.

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/image-drag-and-drop-in-aem... 

I also faced that issue long time back in AEM 6.4 then we used the path field in multi-field instead of drag-and-drop

 

1. Background image for the hero image - You can use the drag and drop(cq/gui/components/authoring/dialog/fileupload)

2. A logo image on top of the background image. (Which can be multiple) - As you are facing issue in it so you can use the path field(granite/ui/components/coral/foundation/form/pathbrowser) in multifield.

<logo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="logo"
name="./logo"
fieldLabel="Logo"
text="BLogo"
rootPath="/content/dam"/>

 Thank You.

Keshav