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.
Can you check this with the package provided in this article:- Creating a Granite/Coral 6.3 Multifield HTL component for Adobe Experience Manager
smacdonald2008 Can you check this as you have already worked on coral3 + Multi-field?
Hi kautuksahni/ navinkaushal
Thanks for your reply. I modified the multi-field in the article you mentioned by including the following file upload widget:
<cardImage
jcr:primaryType="nt:unstructured"
sling:resourceType="pcwr/cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Background Image"
fileNameParameter="./cardImageFileName"
fileReferenceParameter="./cardImageFileRef"
mimeTypes="[image/jpeg,image/png]"
multiple="{Boolean}false"
name="./cardImageFile"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"
allowUpload="{Boolean}false"/>
But the property cardImageFileRef is being stored at location "/content/mfCoral63/en/jcr:content/par/touchmulti" instead of on each of the following nodes:
"/content/mfCoral63/en/jcr:content/par/touchmulti/products/item0"
"/content/mfCoral63/en/jcr:content/par/touchmulti/products/item1"
navinkaushal : Can you please elaborate on your previous comment?
Thanks
Pravin
Views
Replies
Total Likes
hello,
Did you find any solution for that because i am also facing same issue. I explored fileupload widget /libs/cq/gui/components/authoring/dialog/fileupload/render.jsp and found parameter "data-cq-fileupload-temporaryfilepath" is one of the key value which defines where to save node based on contextpath. The problem is it always returns component path as context path and that's why it stored there not at each iterative node like item0, item1 etc...
let me know if you have found any solution.
i also referred http://experience-aem.blogspot.com/2016/06/aem-62-touch-ui-composite-image-multifield.html
but not useful. it doesn't work at all.
thanks,
pawan
Views
Replies
Total Likes
What AEM version are you using?
Views
Replies
Total Likes
I will test this with the latest granite types and see if its working.
Views
Replies
Total Likes
Hi smacdonald2008, @pawan_gupta,
Following is the response from Adobe support when we raised a ticket with for this issue:
As per the internal bug created with the product team, this is a limitation that is being worked upon on at Internal Jira GRANITE-21310. Once the fix is done it would be back-ported to the next AEM 6.3 service pack release which can be tracked using Adobe Experience Manager Help | AEM Maintenance Releases Roadmap .
Views
Replies
Total Likes
HI
I am also facing issue when I put granite/ui/components/foundation/form/fileupload inside multifield. When I open dialog it is showing as some box.Please help on it.
(Using AEM6.4 and Sightly)
Views
Replies
Total Likes
Hi ,
I am also getting the same button in AEM6.4.0 while using the fileupload field.
Please let us know if anyone know the reason.
Thank you
Views
Replies
Total Likes
Hello Pravin,
We are also facing similar issue. Is this resolved for you ?
If so can you throw some light here.
Views
Replies
Total Likes
I guess that while saving your node the order of saving is wrong. Please look into that.
Views
Replies
Total Likes
Hi pravinb2619228,
I am also facing the same issue in AEM6.4 while using the fileupload field , please let us know how to fix this.
Thank you
Views
Replies
Total Likes
For this type of issue - please contact cust care - you may need a hotfix!
Views
Replies
Total Likes
do we have a hot fix for this issue yet ?
Views
Replies
Total Likes
We are also affected by the same issue, we are hoping to use file upload inside the Coral multi-field.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies