Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

cq/gui/components/authoring/dialog/fileupload in multifield

Avatar

Level 2

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):

parag_dalal_0-1599509128514.png

 

 

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

Avatar

Correct answer by
Community Advisor
@parag_dalal  Here is the custom java script code which handles file upload resourceType in multifield which is written by my colleague @ahmedmusallam  https://gist.github.com/Surajkamdi/f45e45d77fd2d6782143694971a8bfd3 Please let me know if you need more help on this.

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @parag_dalal,

Have added fileupload field to my nested multifield component and is available in GitHub repo

It saves the fileReference in individual item node(item0, item1...) in the name fileReference. If you add a property named fileReferenceParameter -> custom name(in the sample, have used imageInMulti) to the fileupload field, then the value will be saved in the respective property name in the item node. 

Note : Rendering logic is not added to HTL. 

Please try and let know if it works

Major difference I could see in your dialog XML is that it has mix of Coral UI 2 and Coral UI 3 fields. It is recommended to follow any one of this and not mix of both.

Avatar

Correct answer by
Community Advisor
@parag_dalal  Here is the custom java script code which handles file upload resourceType in multifield which is written by my colleague @ahmedmusallam  https://gist.github.com/Surajkamdi/f45e45d77fd2d6782143694971a8bfd3 Please let me know if you need more help on this.

Avatar

Level 2
Thank you so much, this was so incredibly helpful.

Avatar

Community Advisor

@parag_dalal @  Here is the custom javascript code which handles file upload resourceType in multifield which is written by @ahmedmusallam 

https://gist.github.com/Surajkamdi/f45e45d77fd2d6782143694971a8bfd3

Please let me know if you need more help on this