Level 2

Solved

Image drag and drop in AEM 6.4 multifield component

25 replies
17308 views
Translate All

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.

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

Show previous replies

Gaurav-Behl

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.

Translate

sumits98596204

Dialog Structure where products is a multifield node:

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

<column

jcr:primaryType="nt:unstructured"

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

<heading

jcr:primaryType="nt:unstructured"

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

fieldLabel="Heading"

name="./heading">

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

<column

jcr:primaryType="nt:unstructured"

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

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

<column

jcr:primaryType="nt:unstructured"

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

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

Translate

Gaurav-Behl

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.

Translate

sumits98596204

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

Please share the vedio .

Translate

Gaurav-Behl

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

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

Translate

sumits98596204

Hi,

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

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

Translate

sumits98596204

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.

Lost the image in the dailog

Thank you as always

Translate

Abhishek_Narula25

Level 3

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

Translate

lucasa10896905

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

<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

Translate

Gaurav-Behl

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

Translate

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO