Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

multifield with image is not working

Avatar

Level 3

Hi All, 

 

I have a component with multifield, which has richtext and image fields, when i add the values, the image values are storing under the component node , not under the multifield node. Only first entry is adding to the node and remaining entries data from multifield is missing when submit the dialog.

 

Same image value is assigning for all multifield entries automatically if we add or modify the image.

 

This is the image field :

prashanth55_1-1623759612059.png

 

Using the AEM 6.5 version

Please help me to resolve this issue.

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@prashanth55 Please refer to below community article. validate your dialog against below structure.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/second-image-with-fileuplo...

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="FHS Hero"

sling:resourceType="cq/gui/components/authoring/dialog"

extraClientlibs="[fhs-hero.authoring.dialog]">

<content

jcr:primaryType="nt:unstructured"

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

<layout

jcr:primaryType="nt:unstructured"

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

margin="{Boolean}true"/>

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

<properties

jcr:primaryType="nt:unstructured"

jcr:title="Global Config"

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

<items jcr:primaryType="nt:unstructured">

<bg-color

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"

fieldLabel=" Background Color"

fieldDescription="Enter or choose the Hex color for the background of the hero. Required for Mobile view even if desktop will only have image."

name="./bgColor"

required="{Boolean}true"/>

<bg-img

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

autoStart="{Boolean}false"

class="cq-droptarget"

fieldDescription="Drop in an image that will act as the background for the hero."

fieldLabel="Background Image"

fileNameParameter="./bgImgName"

fileReferenceParameter="./bgImg"

mimeTypes="[image]"

multiple="{Boolean}false"

name="./bgImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<logos

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="{Boolean}true"

fieldLabel="Logos">

<field

jcr:primaryType="nt:unstructured"

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

name="./logos">

<items jcr:primaryType="nt:unstructured">

<well

jcr:primaryType="nt:unstructured"

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

<items jcr:primaryType="nt:unstructured">

<item-image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

autoStart="{Boolean}false"

class="cq-droptarget"

fileNameParameter="./image/logoImgName"

fileReferenceParameter="./logoReference"

mimeTypes="[image]"

multiple="{Boolean}false"

fieldLabel="Logo"

name="./logoImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<alt-text

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Supply text for screen readers describing image."

fieldLabel="Logo Image Alternative Text"

name="./logoAltText"/>

</items>

</well>

</items>

</field>

</logos>

</items>

</properties>

</items>

</tabs>

</items>

</content>

</jcr:root>

View solution in original post

5 Replies

Avatar

Level 2

Hi prashanth,

Can you share .content.xml so that it can be validated.

Avatar

Level 6

@prashanth55 , There might be issue with your dialog structure. I think you can check properly.

 

For your reference. Please check the below multi-field dialog. This is working fine and implemented on AEM 6.4

 

<images
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click on Add button to add a new image"
fieldLabel="Images">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./imagesList">
<items jcr:primaryType="nt:unstructured">
<column
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="Title"
name="./title"
fieldLabel="Title"
text="Title" />
<description
jcr:primaryType="nt:unstructured"
sling:resourceSuperType="/apps/my-project/components/my-global/rte/richText"
sling:resourceType="/apps/my-project/components/my-global/rte/richText"
fieldDescription="RTE"
fieldLabel="rte"
name="./rte"
useFixedInlineToolbar="{Boolean}true"/>
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="Image"
name="./image"
fieldLabel="Image"
text="Image"
rootPath="/content/dam/my-project"/>
<imageAlt
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Image Alt"
name="./imageAlt"
fieldLabel="Image Alt"
text="Image Alt" />
</items>
</column>
</items>
</field>
</images>

Avatar

Correct answer by
Community Advisor

@prashanth55 Please refer to below community article. validate your dialog against below structure.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/second-image-with-fileuplo...

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="FHS Hero"

sling:resourceType="cq/gui/components/authoring/dialog"

extraClientlibs="[fhs-hero.authoring.dialog]">

<content

jcr:primaryType="nt:unstructured"

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

<layout

jcr:primaryType="nt:unstructured"

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

margin="{Boolean}true"/>

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

<properties

jcr:primaryType="nt:unstructured"

jcr:title="Global Config"

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

<items jcr:primaryType="nt:unstructured">

<bg-color

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"

fieldLabel=" Background Color"

fieldDescription="Enter or choose the Hex color for the background of the hero. Required for Mobile view even if desktop will only have image."

name="./bgColor"

required="{Boolean}true"/>

<bg-img

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

autoStart="{Boolean}false"

class="cq-droptarget"

fieldDescription="Drop in an image that will act as the background for the hero."

fieldLabel="Background Image"

fileNameParameter="./bgImgName"

fileReferenceParameter="./bgImg"

mimeTypes="[image]"

multiple="{Boolean}false"

name="./bgImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<logos

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="{Boolean}true"

fieldLabel="Logos">

<field

jcr:primaryType="nt:unstructured"

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

name="./logos">

<items jcr:primaryType="nt:unstructured">

<well

jcr:primaryType="nt:unstructured"

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

<items jcr:primaryType="nt:unstructured">

<item-image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

autoStart="{Boolean}false"

class="cq-droptarget"

fileNameParameter="./image/logoImgName"

fileReferenceParameter="./logoReference"

mimeTypes="[image]"

multiple="{Boolean}false"

fieldLabel="Logo"

name="./logoImage"

title="Upload Image Asset"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

<alt-text

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Supply text for screen readers describing image."

fieldLabel="Logo Image Alternative Text"

name="./logoAltText"/>

</items>

</well>

</items>

</field>

</logos>

</items>

</properties>

</items>

</tabs>

</items>

</content>

</jcr:root>

Avatar

Level 3

This is the content.xml file of the dialog.

 

<?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="Image Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs">
<items jcr:primaryType="nt:unstructured">
<taskstep
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/include"
name="./text"
path="/apps/km/components/content/richText/text"
useFixedInlineToolbar="{Boolean}true"/>
<imagePath
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fileNameParameter="./imageName"
fileReferenceParameter="./imageReference"
mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
multiple="{Boolean}false"
name="./image"
title="Image Path"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<multifield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Multifield">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./listValues">
<items jcr:primaryType="nt:unstructured">
<steptext
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
name="./text"
useFixedInlineToolbar="{Boolean}true">
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table,experience-aem#colorPicker,url-edit#urledit,clear-urledit#clearurledit,toolTip-aem#toolTip,clearTooltip-aem#clearToolTip,txtVisibleInMobile-aem#showInMobile,txtVisibleInMobile-aem#hideInMobile,txtVisibleInMobile-aem#clearMobileTag,edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml,undo#undo,undo#redo,image#image]">
<popovers jcr:primaryType="nt:unstructured">
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
<styles
jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles"/>
</popovers>
</inline>
<dialogFullScreen
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table,experience-aem#colorPicker,url-edit#urledit,clear-urledit#clearurledit,toolTip-aem#toolTip,clearTooltip-aem#clearToolTip,txtVisibleInMobile-aem#showInMobile,txtVisibleInMobile-aem#hideInMobile,txtVisibleInMobile-aem#clearMobileTag,edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml,undo#undo,undo#redo,image#image]">
<popovers jcr:primaryType="nt:unstructured">
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
<styles
jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles"/>
</popovers>
</dialogFullScreen>
<tableEditOptions
jcr:primaryType="nt:unstructured"
toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
</cui>
</uiSettings>
<rtePlugins jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*">
<formats jcr:primaryType="nt:unstructured">
<default_p
jcr:primaryType="nt:unstructured"
description="Paragraph"
tag="p"/>
<default_h1
jcr:primaryType="nt:unstructured"
description="Heading 1"
tag="h1"/>
<default_h2
jcr:primaryType="nt:unstructured"
description="Heading 2"
tag="h2"/>
<default_h3
jcr:primaryType="nt:unstructured"
description="Heading 3"
tag="h3"/>
<default_h4
jcr:primaryType="nt:unstructured"
description="Heading 4"
tag="h4"/>
<default_h5
jcr:primaryType="nt:unstructured"
description="Heading 5"
tag="h5"/>
<default_h6
jcr:primaryType="nt:unstructured"
description="Heading 6"
tag="h6"/>
<default_blockquote
jcr:primaryType="nt:unstructured"
description="Quote"
tag="blockquote"/>
<default_pre
jcr:primaryType="nt:unstructured"
description="Preformatted"
tag="pre"/>
</formats>
</paraformat>
<links
jcr:primaryType="nt:unstructured"
features="*"/>
<image
jcr:primaryType="nt:unstructured"
features="*"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"/>
<misctools
jcr:primaryType="nt:unstructured"
features="*">
<specialCharsConfig jcr:primaryType="nt:unstructured">
<chars jcr:primaryType="nt:unstructured">
<copyright
jcr:primaryType="nt:unstructured"
entity="&amp;#169;"/>
<trademark
jcr:primaryType="nt:unstructured"
entity="&amp;#8482;"/>
<registered
jcr:primaryType="nt:unstructured"
entity="&amp;#174;"/>
<emDash
jcr:primaryType="nt:unstructured"
entity="&amp;#8212;"/>
<pound
jcr:primaryType="nt:unstructured"
entity="&amp;#163;"/>
<nbsp
jcr:primaryType="nt:unstructured"
entity="&amp;#160;"/>
</chars>
</specialCharsConfig>
</misctools>
<styles
jcr:primaryType="nt:unstructured"
features="*">
<styles jcr:primaryType="nt:unstructured">
<plainSpan
jcr:primaryType="nt:unstructured"
cssName="defaultSpan"
text="Default (add span tag)"/>
<h2header
jcr:primaryType="nt:unstructured"
cssName="suo-headerh2"
text="h2bold"/>
<wrapperh2
jcr:primaryType="nt:unstructured"
cssName="pzn-wrapperh2"
text="h1"/>
<disclaimerText
jcr:primaryType="nt:unstructured"
cssName="pzn-disclaimer-text"
text="disclaimer-text"/>
<styleh3
jcr:primaryType="nt:unstructured"
cssName="pzn-styleh3"
text="h3"/>
<white-text
jcr:primaryType="nt:unstructured"
cssName="pzn-white-text"
text="white-text"/>
<h6header
jcr:primaryType="nt:unstructured"
cssName="suo-headerh6"
text="h6Strong"/>
<support-headerTitle
jcr:primaryType="nt:unstructured"
cssName="support-headerTitle"
text="h1bold"/>
<support-headerTitleBoldTablet
jcr:primaryType="nt:unstructured"
cssName="support-headerTitleBoldTablet"
text="headerTitletabletbold"/>
<support-footnote
jcr:primaryType="nt:unstructured"
cssName="support-footnote"
text="Support Footnote"/>
<lead
jcr:primaryType="nt:unstructured"
cssName="lead"
text="Lead"/>
<font-mlarge
jcr:primaryType="nt:unstructured"
cssName="font-mlarge"
text="Medium large (60px)"/>
<font-large-bold
jcr:primaryType="nt:unstructured"
cssName="font-large-bold"
text="Large (Bold 32px)"/>
<font-large-bold-white
jcr:primaryType="nt:unstructured"
cssName="font-large-bold-white"
text="Large (Bold 32px white)"/>
<font-large
jcr:primaryType="nt:unstructured"
cssName="font-large"
text="Large (32px)"/>
<font-small-bold
jcr:primaryType="nt:unstructured"
cssName="font-small-bold"
text="Small (Bold 20px)"/>
<font-small-bold-white
jcr:primaryType="nt:unstructured"
cssName="font-small-bold-white"
text="Small (Bold 20px white)"/>
<font-small
jcr:primaryType="nt:unstructured"
cssName="font-small"
text="Small (20px)"/>
<font-small-white
jcr:primaryType="nt:unstructured"
cssName="font-small-white"
text="Small (20px white)"/>
<font-small-23-bold
jcr:primaryType="nt:unstructured"
cssName="font-small-23-bold"
text="Small (23px) bold"/>
<font-small-23-white-bold
jcr:primaryType="nt:unstructured"
cssName="font-small-23-white-bold"
text="Small (23px) white bold"/>
<font-small-16
jcr:primaryType="nt:unstructured"
cssName="font-small-16"
text="Small (16px)"/>
<font-mlarge-bold
jcr:primaryType="nt:unstructured"
cssName="font-mlarge-bold"
text="Medium large (Bold 60px)"/>
</styles>
</styles>
<table
jcr:primaryType="nt:unstructured"
features="*"/>
<tracklinks
jcr:primaryType="nt:unstructured"
features="*"/>
<undo
jcr:primaryType="nt:unstructured"
features="*"/>
<toolTip-aem
jcr:primaryType="nt:unstructured"
features="*"/>
<clearTooltip-aem
jcr:primaryType="nt:unstructured"
features="*"/>
<url-edit
jcr:primaryType="nt:unstructured"
features="*"/>
<clear-urledit
jcr:primaryType="nt:unstructured"
features="*"/>
<experience-aem
jcr:primaryType="nt:unstructured"
features="*"/>
<txtVisibleInMobile-aem
jcr:primaryType="nt:unstructured"
features="*"/>
<edit
jcr:primaryType="nt:unstructured"
features="*"/>
<keys
jcr:primaryType="nt:unstructured"
features="*"/>
</rtePlugins>
</steptext>
<file
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
multiple="{Boolean}false"
name="./file"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
</items>
</field>
</multifield>
</items>
</column>
</items>
</taskstep>

</items>
</content>
</jcr:root>

 

We need the drag and drop option for image, not pathfield element.

Avatar

Community Advisor
I just tested your dialog and its storing images fine for me. I tested it on AEM 6.5 with service pack 6.5.8.0. Can you test it in Vanilla instance once.