Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Image drag and drop in AEM 6.4 multifield component

Avatar

Level 2

Hello,

I am having trouble getting Image drag and drop working in a multi-field component in AEM 6.4. I am using sling:resourceType="granite/ui/components/foundation/form/fileupload".

                                        <bgimg

                                            jcr:primaryType="nt:unstructured"

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

                                            allowUpload="{Boolean}false"

                                            autoStart="{Boolean}false"

                                            class="cq-droptarget"

                                            fieldDescription="Select an image as background for the panel. Image height: 240px (min), 240px (max)."

                                            fieldLabel="Background Image"

                                            fileNameParameter="./hbgfileName"

                                            fileReferenceParameter="./hbgfileReference"

                                            mimeTypes="[image]"

                                            multiple="{Boolean}false"

                                            name="./file"

                                            required="{Boolean}true"

                                            title="Upload Image Asset"

                                            uploadUrl="${suffix.path}"

                                            useHTML5="{Boolean}true"/>

Based on suggestions I tried cq/gui/components/authoring/dialog/fileupload but neither of them work.

In neither of the cases do I see an image file drag and drop option.

Has anyone go this working successfully? Help will be appreciated,.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Did you include cq:dropTargets node definition where you allow the mimetypes to be dropped?

Follow the dialog definition of /apps/core/wcm/components/image/v2/image and fix your code accordingly -

/apps/core/wcm/components/image/v2/image/cq:editConfig/cq:dropTargets

View solution in original post

25 Replies

Avatar

Correct answer by
Level 10

Did you include cq:dropTargets node definition where you allow the mimetypes to be dropped?

Follow the dialog definition of /apps/core/wcm/components/image/v2/image and fix your code accordingly -

/apps/core/wcm/components/image/v2/image/cq:editConfig/cq:dropTargets

Avatar

Level 10

Try to get this working in a non-multifield and then once it works there - port it to a multifield.

Avatar

Level 2

The same config works in non-multifield and fails when ported to multifield.

To answer gauravb10066713​, I already has cq:editConfig in place.

Followed your suggestion to no avail.

The dialog just does not close on save.

<?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="cq:EditConfig">

    <cq:dropTargets jcr:primaryType="nt:unstructured">

        <image

            jcr:primaryType="cq:DropTargetConfig"

            accept="[image/.*]"

            groups="[media]"

            propertyName="./hbgfileReference">

            <parameters

                jcr:primaryType="nt:unstructured"

                sling:resourceType="wcm/foundation/components/image"

                imageCrop=""

                imageMap=""

                imageRotate=""/>

        </image>

    </cq:dropTargets>

    <cq:listeners

        jcr:primaryType="cq:EditListenersConfig"

        aftercopymove="REFRESH_PAGE"

        afterdelete="REFRESH_PAGE"

        afteredit="REFRESH_PAGE"

        afterinsert="REFRESH_PAGE"/>

</jcr:root>

Avatar

Level 10

Do you see any error in console logs? Is it possible for you to share relevant artifacts?

Avatar

Level 2

No errors in console.

This is my dialog:

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

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Panel Information"

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

    <content

        jcr:primaryType="nt:unstructured"

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

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

            <column

                jcr:primaryType="nt:unstructured"

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

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

                    <panels

                        jcr:primaryType="nt:unstructured"

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

                        composite="{Boolean}true"

                        fieldLabel="Service Info Component (Click on Add button to add sections)">

                        <field

                            jcr:primaryType="nt:unstructured"

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

                            name="./panels">

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

                                <column

                                    jcr:primaryType="nt:unstructured"

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

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

                                        <bgimg

                                            jcr:primaryType="nt:unstructured"

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

                                            allowUpload="{Boolean}false"

                                            autoStart="{Boolean}false"

                                            class="cq-droptarget"

                                            fieldDescription="Select an image as background for the panel. Image height: 240px (min), 240px (max)."

                                            fieldLabel="Background Image"

                                            fileNameParameter="./hbgfileName"

                                            fileReferenceParameter="./hbgfileReference"

                                            mimeTypes="[image]"

                                            multiple="{Boolean}false"

                                            name="./file"

                                            required="{Boolean}true"

                                            title="Upload Image Asset"

                                            uploadUrl="${suffix.path}"

                                            useHTML5="{Boolean}true"/>

                                        <header

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldDescription="The maximum length for this field is 15 characters"

                                            fieldLabel="Header"

                                            maxlength="15"

                                            name="./header"

                                            required="{Boolean}true"/>

                                        <headercolor

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Title Color"

                                            name="./headercolor"

                                            required="{Boolean}true">

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

                                                <white

                                                    jcr:primaryType="nt:unstructured"

                                                    text="White"

                                                    value="dt-text-white"/>

                                                <black

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Black"

                                                    value="dt-text-black"/>

                                                <blue

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Blue"

                                                    value=" dt-text-blue"/>

                                                <purple

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Purple"

                                                    value="dt-purple-text"/>

                                            </items>

                                        </headercolor>

                                        <buttonoption

                                            granite:class="cq-dialog-checkbox-showhide"

                                            jcr:primaryType="nt:unstructured"

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

                                            name="./option"

                                            text="Add Button?"

                                            value="true">

                                            <granite:data

                                                jcr:primaryType="nt:unstructured"

                                                cq-dialog-checkbox-showhide-target=".showhidebutton"/>

                                        </buttonoption>

                                        <button

                                            granite:class="showhidebutton"

                                            jcr:primaryType="nt:unstructured"

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

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

                                                <buttontext

                                                    jcr:primaryType="nt:unstructured"

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

                                                    fieldDescription="The maximum length for this field is 180 characters"

                                                    fieldLabel="Button Display Text"

                                                    maxlength="180"

                                                    name="./buttontext"/>

                                                <buttontheme

                                                    jcr:primaryType="nt:unstructured"

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

                                                    fieldLabel="Button Theme"

                                                    name="./buttontheme">

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

                                                        <primary

                                                            jcr:primaryType="nt:unstructured"

                                                            text="Primary Color Theme"

                                                            value="btn-primary"/>

                                                        <secondary

                                                            jcr:primaryType="nt:unstructured"

                                                            text="Secondary Color Theme "

                                                            value="btn-secondary"/>

                                                        <carrier-color

                                                            jcr:primaryType="nt:unstructured"

                                                            text="Carrier Color (Purple)"

                                                            value="btn-carrier"/>

                                                        <dovetail

                                                            jcr:primaryType="nt:unstructured"

                                                            text="Green Color Theme (Blue)"

                                                            value="btn-green"/>

                                                        <tertiary

                                                            jcr:primaryType="nt:unstructured"

                                                            text="Tertiary Color Theme"

                                                            value="btn-tertiary"/>

                                                    </items>

                                                </buttontheme>

                                                <btnurl

                                                    jcr:primaryType="nt:unstructured"

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

                                                    fieldDescription="Starting with http:// or https://"

                                                    fieldLabel="Button Target URL"

                                                    name="./buttonurl"/>

                                                <buttontarget

                                                    jcr:primaryType="nt:unstructured"

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

                                                    fieldLabel="Target (Open New Window or Same Window)"

                                                    name="./buttontarget">

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

                                                        <new-window

                                                            jcr:primaryType="nt:unstructured"

                                                            text="New Window"

                                                            value="_blank"/>

                                                        <same-window

                                                            jcr:primaryType="nt:unstructured"

                                                            text="Same Window"

                                                            value="_self"/>

                                                    </items>

                                                </buttontarget>

                                            </items>

                                        </button>

                                    </items>

                                </column>

                            </items>

                        </field>

                    </panels>

                </items>

            </column>

        </items>

    </content>

</jcr:root>

cq:EditConfig:

<?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="cq:EditConfig">

    <cq:dropTargets jcr:primaryType="nt:unstructured">

        <image

            jcr:primaryType="cq:DropTargetConfig"

            accept="[image/.*]"

            groups="[media]"

            propertyName="./hbgfileReference">

            <parameters

                jcr:primaryType="nt:unstructured"

                sling:resourceType="wcm/foundation/components/image"

                imageCrop=""

                imageMap=""

                imageRotate=""/>

        </image>

    </cq:dropTargets>

    <cq:listeners

        jcr:primaryType="cq:EditListenersConfig"

        aftercopymove="REFRESH_PAGE"

        afterdelete="REFRESH_PAGE"

        afteredit="REFRESH_PAGE"

        afterinsert="REFRESH_PAGE"/>

</jcr:root>

If I change the granite/ui/components/foundation/form/fileupload to granite/ui/components/coral/foundation/form/pathfield,all works fine.

Changing to cq/gui/components/authoring/dialog/fileupload results in the same behavior, no errors in the logs.

Avatar

Level 10

I'm able to reproduce the behavior that you mentioned and I plan to debug it later.

Check if this alternate solution suites your requirement-

Experiencing Adobe Experience Manager - Day CQ: AEM 62 - Touch UI Composite Image Multifield

It uses granite/ui/components/foundation/form/fileupload and works fine on 6.4.3

Avatar

Level 10

Is there any specific reason of using sling:resourceType="granite/ui/components/foundation/form/fileupload"

and not sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"?

All other resourcetypes are of coral3 except fileupload.

Avatar

Level 2

Hi, I was trying out different options, results seem to be the same with sling:resourceType="granite/ui/components/coral/foundation/form/fileupload".

Avatar

Level 10

Could you share the screenshot of dialog here? Are you using coral2 or coral3 libraries for the entire page/project?

Are you on latest SP/CFP and core components?

Avatar

Level 1

Hi Team,

Please let me also know if anyone found the solution of using image field in multifield on AEM6.4.

I am also not able to find any solution

Thank you

Avatar

Level 10

Could you share the error details/screenshot/dialog.xml?

If it shows as disabled in the multifield then the most likely, the issue is with coral2-coral3 conflicts on the page.

Avatar

Level 1

Dialog Structure where products is a multifield node:

1676061_pastedImage_0.png

Please also find attached dialog xml .

<?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="63 Collapsible Multifield"

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

    <content

        jcr:primaryType="nt:unstructured"

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

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

            <column

                jcr:primaryType="nt:unstructured"

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

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

                    <heading

                        jcr:primaryType="nt:unstructured"

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

                        fieldLabel="Heading"

                        name="./heading">

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

                            <h1

                                jcr:primaryType="nt:unstructured"

                                text="H1"

                                value="h1"/>

                            <h2

                                jcr:primaryType="nt:unstructured"

                                text="H2"

                                value="h2"/>

                            <h3

                                jcr:primaryType="nt:unstructured"

                                text="H3"

                                value="h3"/>

                            <h4

                                jcr:primaryType="nt:unstructured"

                                text="H4"

                                value="h4"/>

                            <h5

                                jcr:primaryType="nt:unstructured"

                                text="H5"

                                value="h5"/>

                            <h6

                                jcr:primaryType="nt:unstructured"

                                text="H6"

                                value="h6"/>

                        </items>

                    </heading>

                    <description

                        jcr:primaryType="nt:unstructured"

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

                        fieldDescription="Description"

                        fieldLabel="Description"

                        name="./description"/>

                    <fieldlabel

                        jcr:primaryType="nt:unstructured"

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

                        fieldDescription="Label text"

                        fieldLabel="Text Label"

                        name="./labeltext"/>

                    <show

                        jcr:primaryType="nt:unstructured"

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

                        fieldDescription="Use this key to fetch value from response"

                        name="./show"

                        text="Show Image"

                        value="{Boolean}true"/>

                    <products

                        jcr:primaryType="nt:unstructured"

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

                        composite="{Boolean}true"

                        eaem-show-on-collapse="EAEM.showProductName"

                        fieldLabel="Products">

                        <field

                            jcr:primaryType="nt:unstructured"

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

                            name="./products">

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

                                <column

                                    jcr:primaryType="nt:unstructured"

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

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

                                        <heroimage

                                            jcr:primaryType="nt:unstructured"

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

                                            allowUpload="{Boolean}false"

                                            autoStart="{Boolean}false"

                                            class="cq-droptarget"

                                            fieldLabel="Hero Image"

                                            fileNameParameter="./fileName"

                                            fileReferenceParameter="./fileReference"

                                            mimeTypes="[image]"

                                            multiple="{Boolean}false"

                                            name="./image"

                                            uploadUrl="${suffix.path}"

                                            useHTML5="{Boolean}true"/>

                                        <productheading

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldDescription="Enter Product Heading"

                                            fieldLabel="Product Heading"

                                            name="./productheading"/>

                                        <nestedfieldsets

                                            jcr:primaryType="nt:unstructured"

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

                                            composite="{Boolean}true"

                                            fieldLabel="Nested Items">

                                            <field

                                                jcr:primaryType="nt:unstructured"

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

                                                name="./nestedfieldset">

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

                                                    <column

                                                        jcr:primaryType="nt:unstructured"

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

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

                                                            <ischecked

                                                                jcr:primaryType="nt:unstructured"

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

                                                                fieldDescription="Use this key to fetch value from response"

                                                                name="./ischecked"

                                                                text="Is Checked"

                                                                value="{Boolean}true"/>

                                                            <link

                                                                jcr:primaryType="nt:unstructured"

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

                                                                fieldDescription="Select Path"

                                                                fieldLabel="Link"

                                                                name="./link"

                                                                rootPath="/content"

                                                                suffix=".html"/>

                                                        </items>

                                                    </column>

                                                </items>

                                            </field>

                                        </nestedfieldsets>

                                    </items>

                                </column>

                            </items>

                        </field>

                    </products>

                </items>

            </column>

        </items>

    </content>

</jcr:root>

No error in the console and dialog doesn't close on click of OK.

Avatar

Level 10

Just delete uploadUrl property and test.

uploadUrl="${suffix.path}"

Works fine for me on 6.4.3 and core components 2.2.2 If you require, I can share a video of same.

uploadUrlstringel

The URL to upload the file. This is only required when autoStart is true.

Avatar

Level 1

Hi

After removing the property ,still no luck.

Now still dialog not closed of click of ok tick mark . No error in the console. I am working on AEM 6.4.0

1677887_pastedImage_1.png

Please share the vedio .

Avatar

Level 10

As mentioned earlier, if the dialog doesn't close then it's most likely a js conflict on the page. Please try the same dialog in a blank project/age and see if it works

If you are have sling:resourceSuperType property configured on the component, then it could be reason of missing inherited properties from  parent component.

you may try alternate resourceTypes to find the root cause -

Coral2 - granite/ui/components/foundation/form/fileupload

Coral3 -  cq/gui/components/authoring/dialog/fileupload or granite/ui/components/coral/foundation/form/fileupload

FileUpload — Granite UI 1.0 documentation

dialog.gif

**The image in dialog doesn't render because my HTL script is blank.

Avatar

Level 1

Hi,

Please find the image of a dialog after updating the steps given above.

1678741_pastedImage_0.png

Now upload file appears like a button. Can you please assist me how to handle this.

I have not included any external JS file and working on We.retail page to make this component work.

Thanks for all your help

Avatar

Level 1

Hi,

Now I am able to click ok and save the property in jcr:content. But now the issue is when I open the same dailog again on page the image is not appearing in the dailog .

What could be the reason behind this ?

Able to upload the image and property saved in the jcr.

1678879_pastedImage_0.png

Lost the image in the dailog

1678886_pastedImage_1.png

Thank you as always

Avatar

Level 4

I am also facing the same issue. Is this resolved?

Avatar

Level 1

I'm facing this issue as well, but getting a JS error on console. Any clue?

Screen Shot 2019-02-04 at 14.27.46.png

<heroimage

                                                jcr:primaryType="nt:unstructured"

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

                                                allowUpload="{Boolean}false"

                                                autoStart="{Boolean}false"

                                                class="cq-droptarget"

                                                fieldLabel="Hero Image"

                                                fileNameParameter="./fileName"

                                                fileReferenceParameter="./fileReference"

                                                mimeTypes="[image]"

                                                multiple="{Boolean}false"

                                                name="./image"

                                                useHTML5="{Boolean}true"/>

AEM 6.4.2 and core components 2.2.2

Avatar

Level 10

this is one of sample implementations, compare your code against it -

<file
   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/webp,image/tiff,image/svg+xml]"
   multiple="{Boolean}false"
   name="./file"
   title="Upload Image Asset"
   uploadUrl="${suffix.path}"
   useHTML5="{Boolean}true"/>

aem-core-wcm-components/.content.xml at master · adobe/aem-core-wcm-components · GitHub

alternatively, you could use granite/ui/components/coral/foundation/form/fileupload, if applicable

FileUpload — Granite UI 1.0 documentation