Level 2

Coral Fileupload not working when placed inside Coral multi-field

Forum|Forum|7 years ago
February 24, 2018
3 replies
10876 views

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">

<tabs

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/tabs"

maximized="{Boolean}true">

<generalItemsTab

jcr:primaryType="nt:unstructured"

jcr:title="General"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<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">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<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">

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

Source image file 10300 not available

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

kautuk_sahni

Community Manager

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?

Kautuk Sahni

P

pravinb2619228Author

Level 2

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

P

pawan_gupta

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