Image drag and drop in AEM 6.4 multifield component

anands82757572 16-01-2019

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,.

Accepted Solutions (1)

Accepted Solutions (1)

gauravb41175071
MVP
17-01-2019

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

Answers (24)

Answers (24)

lucasa10896905 07-02-2019

Just a quick update.

Coral3 and multifields are still not fully working in 6.4.3. You can close the dialog now (no js error in console) but as soon you add a second item it saves it in the root component folder, it doesn't creates the item1 node as expected.

Same as described here Coral Fileupload not working when placed inside Coral multi-field

karanmahi 10-02-2019

Hi gauravb41175071 I am on AEM 6.4. What is the difference between using cq/gui/components/authoring/dialog/fileupload and granite/ui/components/coral/foundation/form/fileupload? In Coral3, we have to use granite/ui/components/coral/foundation/form/fileupload, but this is not workig for me because i have the fileupload dialogs from coral2 and those have properties like "fileReference" which is not present in coral3. How to use fileupload backward compatible?

lucasa10896905 05-02-2019

Thanks for the example, as you said it works fine in 6.4.3 but it doesn't works in 6.4.2. I checked it myself, unfortunately I'm still getting the javascript error in 6.4.2

lucasa10896905 04-02-2019

Thanks! I grabbed the code from the same implementations, so the code is the same. I also tried deleting the uloadUrl since autostart is set to false.

Still getting the json error though. Just to clarify, it works fine without being in a multifield. Cannot use coral3 fileupload since AFAIK it cannot drag&drop assets, tried to make drag&drop work until I found that issue.

gauravb41175071
MVP
04-02-2019

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

lucasa10896905 04-02-2019

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

sumits98596204 29-01-2019

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

sumits98596204 29-01-2019

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

gauravb41175071
MVP
28-01-2019

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.

sumits98596204 27-01-2019

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 .

gauravb41175071
MVP
25-01-2019

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.

sumits98596204 25-01-2019

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.

gauravb41175071
MVP
25-01-2019

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.

sumits98596204 25-01-2019

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

gauravb41175071
MVP
18-01-2019

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?

anands82757572 18-01-2019

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

gauravb41175071
MVP
17-01-2019

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.

gauravb41175071
MVP
17-01-2019

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

anands82757572 17-01-2019

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.

anands82757572 17-01-2019

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>