Level 2

Solved

Image drag and drop in AEM 6.4 multifield component

Forum|Forum|7 years ago
January 17, 2019
25 replies
17095 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Gaurav-Behl

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

Gaurav-BehlAccepted solution

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

smacdonald2008

Level 10

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

A

anands82757572Author

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>

Gaurav-Behl

Level 10

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

A

anands82757572Author

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">

<column

jcr:primaryType="nt:unstructured"

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

<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">

<column

jcr:primaryType="nt:unstructured"

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

<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">

<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">

<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">

<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">

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

Gaurav-Behl

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

Gaurav-Behl

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.

A

anands82757572Author

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

Gaurav-Behl

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?

sumits98596204

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

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded