Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
cq/gui/components/authoring/dialog/fileupload in multifield
Hi, I am struggling with how to use cq/gui/components/authoring/dialog/fileupload in a granite/ui/components/coral/foundation/form/multifield.
I have read the many questions where the topic was discussed, but was wondering if anyone would be kind enough to provide a working sample (for future reference as well) of a functioning cq/gui/components/authoring/dialog/fileupload in a granite/ui/components/coral/foundation/form/multifield.
One of my failed attempts (bareboned to be more concise) looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" jcr:primaryType="nt:unstructured" jcr:title="RANDOM TITLE" sling:resourceType="cq/gui/components/authoring/dialog">
<content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
<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">
<tab1 jcr:primaryType="nt:unstructured" jcr:title="RANDOM TAB TITLE" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true">
<layout jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" />
<items jcr:primaryType="nt:unstructured">
<column jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fields jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
deleteHint="{Boolean}false"
fieldLabel="Fields">
<field jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./items">
<items jcr:primaryType="nt:unstructured">
<fieldset jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fieldset">
<layout jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
method="absolute" />
<items jcr:primaryType="nt:unstructured">
<column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<section jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Section"
name="./section">
<items jcr:primaryType="nt:unstructured">
<type1 jcr:primaryType="nt:unstructured" text="Alfa" selected="{Boolean}true" value="alfa" />
<type2 jcr:primaryType="nt:unstructured" text="Beta" value="beta" />
<type3 jcr:primaryType="nt:unstructured" text="Gamma" value="gamma" />
<type4 jcr:primaryType="nt:unstructured" text="Teta" value="teta" />
</items>
</section>
<background jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/pathfield" fieldLabel="Background image" rootPath="/content/dam" name="./imagesearch" />
<link-image-no-text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<image jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Picture"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
useHTML5="{Boolean}true"
allowUpload="{Boolean}false" />
<imageAlt jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Image Alt"
name="./imgAlt" />
</items>
</link-image-no-text>
<clicky jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="onClick function"
name="./clicky" />
</items>
</column>
</items>
</fieldset>
</items>
</field>
</fields>
</items>
</column>
</items>
</tab1>
</items>
</tabs>
</items>
</content>
</jcr:root>
The issue is that, when I submit the dialog, the fileReference values are saved as an array of String[] on the main component's node, while I'd like them to be stored each one on a different item property (es. item0, item1, item2, etc.)
If instead of using cq/gui/components/authoring/dialog/fileupload, I switch to granite/ui/components/coral/foundation/form/pathfield, everything works like a charm, and the item0,item1,itemN nodes are created, each one with its own fileReference property.
This is, more or less, what's on the JCR (you can assume valid properties and nodes where there is a black box):
Unfortunately, granite/ui/components/coral/foundation/form/pathfield cannot be used with drag&drop, and my requirement is to allow the drag&drop of images from the DAM.
So, again, I don't know if somebody can shed some light on the issue and ideally provide a working example to be used as a starting point, but I'll be immensly grateful (as always) for any help you'll be able to provide.
As a final note, we are using AEM 6.5.4.
Thank you very much,
Parag
1 Accepted Solution
Related Conversations
