Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Coral Fileupload not working when placed inside Coral multi-field

Avatar

Avatar
Ignite 1
Level 2
pravinb2619228
Level 2

Likes

3 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 3
Give Back
Boost 3
View profile

Avatar
Ignite 1
Level 2
pravinb2619228
Level 2

Likes

3 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 3
Give Back
Boost 3
View profile
pravinb2619228
Level 2

24-02-2018

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.

Replies

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

26-02-2018

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?

Avatar

Avatar
Give Back 5
Level 3
navinkaushal
Level 3

Likes

16 likes

Total Posts

70 posts

Correct Reply

7 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile

Avatar
Give Back 5
Level 3
navinkaushal
Level 3

Likes

16 likes

Total Posts

70 posts

Correct Reply

7 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile
navinkaushal
Level 3

26-02-2018

I guess that while saving your node the order of saving is wrong. Please look into that.

Avatar

Avatar
Ignite 1
Level 2
pravinb2619228
Level 2

Likes

3 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 3
Give Back
Boost 3
View profile

Avatar
Ignite 1
Level 2
pravinb2619228
Level 2

Likes

3 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 3
Give Back
Boost 3
View profile
pravinb2619228
Level 2

12-03-2018

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

Avatar

Avatar
Level 1
pawan_gupta
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
pawan_gupta
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
pawan_gupta
Level 1

15-08-2018

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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

15-08-2018

What AEM version are you using?

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

15-08-2018

I will test this with the latest granite types and see if its working.

Avatar

Avatar
Ignite 1
Level 2
pravinb2619228
Level 2

Likes

3 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 3
Give Back
Boost 3
View profile

Avatar
Ignite 1
Level 2
pravinb2619228
Level 2

Likes

3 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
Validate 1
Give Back 3
Give Back
Boost 3
View profile
pravinb2619228
Level 2

15-08-2018

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 .

Avatar

Avatar
Level 1
ajay_uddaraju
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
ajay_uddaraju
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
ajay_uddaraju
Level 1

23-10-2018

Hello Pravin,

We are also facing similar issue. Is this resolved for you ?

If so can you throw some light here.

Avatar

Avatar
Level 1
ashwinik6452226
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
ashwinik6452226
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
ashwinik6452226
Level 1

18-12-2018

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)

imagemultifield.png

imgmultifield.PNG