Learn about Edge Delivery Services in upcoming GEM session
Coral Fileupload not working when placed inside Coral multi-field
I am working on a component which requires an image to be uploaded using fileupload widget inside a coral multi-field
Following is the dialog configuration:
<?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="Custom Multi-field Component"
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">
<generalItemsTab
jcr:primaryType="nt:unstructured"
jcr:title="General"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Please provide title for the component"
fieldLabel="Title"
name="./title"/>
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="myProject/cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Background Image"
fileNameParameter="./imageFileName"
fileReferenceParameter="./imageFileRef"
mimeTypes="[image/jpeg,image/png]"
multiple="{Boolean}false"
name="./imageFile"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
</items>
</content>
</items>
</generalItemsTab>
<productsTab
jcr:primaryType="nt:unstructured"
jcr:title="Products Tab"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<products
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add field' to add a new Product"
fieldLabel="Products">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./multiFieldItems">
<items jcr:primaryType="nt:unstructured">
<productName
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Please provide name for the Product"
fieldLabel="Product Name"
name="./productName"/>
<productDesc
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldDescription="Please provide Description for the Product"
fieldLabel="Product Description"
name="./productDesc"/>
<productImage
jcr:primaryType="nt:unstructured"
sling:resourceType="myProject/cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Product Image"
fileNameParameter="./productImageFileName"
fileReferenceParameter="./productImageFileRef"
mimeTypes="[image/jpeg,image/png]"
multiple="{Boolean}false"
name="./productImageFile"
title="Upload Product Image"
useHTML5="{Boolean}true"/>
</items>
</field>
</products>
</items>
</content>
</items>
</productsTab>
</items>
</tabs>
</items>
</content>
</jcr:root>
Issue: When multiple product info is added in the "Products Tab" of the dialog, the property "productImageFileRef" should be stored on each of the multi-field nodes. But that is not the case as you can see below:
Note: I have overridden the OOTB /libs/cq/gui/components/authoring/dialog/fileupload/render.jsp inside my project to fix one of the issues mentioned in this link
https://github.com/Adobe-Marketing-Cloud/aem-core-wcm-components/issues/101.
I have also referred the solution specified at http://experience-aem.blogspot.com/2016/06/aem-62-touch-ui-composite-image-multifield.html but that does not work in my case as I am using Coral widgets.
Environment : AEM 6.3.1.2
Any inputs from the community members would be appreciated.
