Hello everyone,
I need to create two image uploads in my hero image component. Both need to be drag and drop images.
1. Background image for the hero image
2. A logo image on top of the background image. (Which can be multiple)
I used sling:resourceType= "granite/ui/components/foundation/form/fileupload" for the hero background image and
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @lwang
Its working fine for me in AEM 6.5 i.e. added 2 fileupload(having same sling:resourceType "cq/gui/components/authoring/dialog/fileupload") in multifield, configured images are getting store as expected & able to access image path using "fileReferenceParameter". can you please share complete dialog xml & also is there any reason why you are using two different resourceType here.
replace "granite/ui/components/foundation/form/fileupload" by "cq/gui/components/authoring/dialog/fileupload" as highlighted below then it will store & retrieve image in multifield as expected.
<?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>
Hi @lwang
Its working fine for me in AEM 6.5 i.e. added 2 fileupload(having same sling:resourceType "cq/gui/components/authoring/dialog/fileupload") in multifield, configured images are getting store as expected & able to access image path using "fileReferenceParameter". can you please share complete dialog xml & also is there any reason why you are using two different resourceType here.
replace "granite/ui/components/foundation/form/fileupload" by "cq/gui/components/authoring/dialog/fileupload" as highlighted below then it will store & retrieve image in multifield as expected.
<?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>
Hi @Manjunath_K
Thanks for the response.
Here is the complete code
<?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="granite/ui/components/foundation/form/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="granite/ui/components/foundation/form/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>
I had two sling resource type because the first time it would work for me when I first implemented this. Even when changed to the same, the second image still doesn't render. Thanks.
Views
Replies
Total Likes
Hi @lwang
I tried to reproduce the issue using dialog xml which you shared & even for me images are not shown in multifield after save & opening dialog. its because of resourceType which you have added for fileupload. so, replace "granite/ui/components/foundation/form/fileupload" by "cq/gui/components/authoring/dialog/fileupload" both for Background Image & Logo as highlighted below then it will store & retrieve image in multifield as expected.
<?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>
Views
Replies
Total Likes
Hi @Manjunath_K,
I tried using your version but when you have multiple logos entered and you submit the form, the next time it is being opened it just shows the last logo. Also if the CRX the logos are not located under the multifield but on the resource node itself.
Please find the screen shots below:
Multifield:
CRXDE:
Before submitting form:
On reopening dialog:
I am using AEM 6.5 but this approach does not seem working correctly. Am I missing something?
Views
Replies
Total Likes
Hi @lwang
Image widget granite/ui/components/foundation/form/fileupload will not work directly in multifield. You need to write a custom listener to load and submit the multifield value. Refer below link
http://experience-aem.blogspot.com/2016/06/aem-62-touch-ui-composite-image-multifield.html
Use cq/gui/components/authoring/dialog/fileupload to avoid writing custom js. Refer below documentation.
AG
I tried using the solution above but when you have multiple logos entered and you submit the form, the next time it is being opened it just shows the last logo. Also if the CRX the logos are not located under the multifield but on the resource node itself.
Please find the screen shots below:
Multifield:
CRXDE:
Before submitting form:
On reopening dialog:
I am using AEM 6.5 but this approach does not seem working correctly. Am I missing something?
@lwang : Please check the thread below for the reference.
I also faced that issue long time back in AEM 6.4 then we used the path field in multi-field instead of drag-and-drop
1. Background image for the hero image - You can use the drag and drop(cq/gui/components/authoring/dialog/fileupload)
2. A logo image on top of the background image. (Which can be multiple) - As you are facing issue in it so you can use the path field(granite/ui/components/coral/foundation/form/pathbrowser) in multifield.
<logo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="logo"
name="./logo"
fieldLabel="Logo"
text="BLogo"
rootPath="/content/dam"/>
Thank You.
Keshav
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies