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

Avatar

Avatar

parag_dalal

Avatar

parag_dalal

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

View Entire Topic

Avatar

Avatar

Suraj_Kamdi

MVP

Avatar

Suraj_Kamdi

MVP

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.