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

parag_dalal

07-09-2020

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

Accepted Solutions (1)

Accepted Solutions (1)

Suraj_Kamdi

MVP

07-09-2020

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

Answers (2)

Answers (2)

Vijayalakshmi_S

MVP

07-09-2020

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.