Second Image with fileupload doesn't render in a mult...

[lwang]

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?

[Manjunath_K · Accepted solution]

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>

[lwang]

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. 

[Manjunath_K]

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>

[erges_k]

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:

CRXDE:

Before submitting form:

On reopening dialog:

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

[Anudeep_Garnepudi]

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

[erges_k]

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:

CRXDE:

Before submitting form:

On reopening dialog:

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

[kchaurasiya]

@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