この会話は、活動がないためロックされています。新しい投稿を作成してください。
この会話は、活動がないためロックされています。新しい投稿を作成してください。
Hello,
I am having trouble getting Image drag and drop working in a multi-field component in AEM 6.4. I am using sling:resourceType="granite/ui/components/foundation/form/fileupload".
<bgimg
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Select an image as background for the panel. Image height: 240px (min), 240px (max)."
fieldLabel="Background Image"
fileNameParameter="./hbgfileName"
fileReferenceParameter="./hbgfileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
required="{Boolean}true"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
Based on suggestions I tried cq/gui/components/authoring/dialog/fileupload but neither of them work.
In neither of the cases do I see an image file drag and drop option.
Has anyone go this working successfully? Help will be appreciated,.
解決済! 解決策の投稿を見る。
Did you include cq:dropTargets node definition where you allow the mimetypes to be dropped?
Follow the dialog definition of /apps/core/wcm/components/image/v2/image and fix your code accordingly -
/apps/core/wcm/components/image/v2/image/cq:editConfig/cq:dropTargets
表示
返信
いいね!の合計
Did you include cq:dropTargets node definition where you allow the mimetypes to be dropped?
Follow the dialog definition of /apps/core/wcm/components/image/v2/image and fix your code accordingly -
/apps/core/wcm/components/image/v2/image/cq:editConfig/cq:dropTargets
表示
返信
いいね!の合計
Try to get this working in a non-multifield and then once it works there - port it to a multifield.
表示
返信
いいね!の合計
The same config works in non-multifield and fails when ported to multifield.
To answer gauravb10066713, I already has cq:editConfig in place.
Followed your suggestion to no avail.
The dialog just does not close on save.
<?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="cq:EditConfig">
<cq:dropTargets jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="cq:DropTargetConfig"
accept="[image/.*]"
groups="[media]"
propertyName="./hbgfileReference">
<parameters
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/image"
imageCrop=""
imageMap=""
imageRotate=""/>
</image>
</cq:dropTargets>
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
aftercopymove="REFRESH_PAGE"
afterdelete="REFRESH_PAGE"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"/>
</jcr:root>
表示
返信
いいね!の合計
Do you see any error in console logs? Is it possible for you to share relevant artifacts?
表示
返信
いいね!の合計
No errors in console.
This is my dialog:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Panel Information"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<panels
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Service Info Component (Click on Add button to add sections)">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./panels">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<bgimg
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Select an image as background for the panel. Image height: 240px (min), 240px (max)."
fieldLabel="Background Image"
fileNameParameter="./hbgfileName"
fileReferenceParameter="./hbgfileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
required="{Boolean}true"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<header
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="The maximum length for this field is 15 characters"
fieldLabel="Header"
maxlength="15"
name="./header"
required="{Boolean}true"/>
<headercolor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Title Color"
name="./headercolor"
required="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<white
jcr:primaryType="nt:unstructured"
text="White"
value="dt-text-white"/>
<black
jcr:primaryType="nt:unstructured"
text="Black"
value="dt-text-black"/>
<blue
jcr:primaryType="nt:unstructured"
text="Blue"
value=" dt-text-blue"/>
<purple
jcr:primaryType="nt:unstructured"
text="Purple"
value="dt-purple-text"/>
</items>
</headercolor>
<buttonoption
granite:class="cq-dialog-checkbox-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./option"
text="Add Button?"
value="true">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-checkbox-showhide-target=".showhidebutton"/>
</buttonoption>
<button
granite:class="showhidebutton"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<buttontext
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="The maximum length for this field is 180 characters"
fieldLabel="Button Display Text"
maxlength="180"
name="./buttontext"/>
<buttontheme
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Button Theme"
name="./buttontheme">
<items jcr:primaryType="nt:unstructured">
<primary
jcr:primaryType="nt:unstructured"
text="Primary Color Theme"
value="btn-primary"/>
<secondary
jcr:primaryType="nt:unstructured"
text="Secondary Color Theme "
value="btn-secondary"/>
<carrier-color
jcr:primaryType="nt:unstructured"
text="Carrier Color (Purple)"
value="btn-carrier"/>
<dovetail
jcr:primaryType="nt:unstructured"
text="Green Color Theme (Blue)"
value="btn-green"/>
<tertiary
jcr:primaryType="nt:unstructured"
text="Tertiary Color Theme"
value="btn-tertiary"/>
</items>
</buttontheme>
<btnurl
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Starting with http:// or https://"
fieldLabel="Button Target URL"
name="./buttonurl"/>
<buttontarget
jcr:primaryType="nt:unstructured"
sling:resourceType="/libs/granite/ui/components/coral/foundation/form/select"
fieldLabel="Target (Open New Window or Same Window)"
name="./buttontarget">
<items jcr:primaryType="nt:unstructured">
<new-window
jcr:primaryType="nt:unstructured"
text="New Window"
value="_blank"/>
<same-window
jcr:primaryType="nt:unstructured"
text="Same Window"
value="_self"/>
</items>
</buttontarget>
</items>
</button>
</items>
</column>
</items>
</field>
</panels>
</items>
</column>
</items>
</content>
</jcr:root>
cq:EditConfig:
<?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="cq:EditConfig">
<cq:dropTargets jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="cq:DropTargetConfig"
accept="[image/.*]"
groups="[media]"
propertyName="./hbgfileReference">
<parameters
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/image"
imageCrop=""
imageMap=""
imageRotate=""/>
</image>
</cq:dropTargets>
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
aftercopymove="REFRESH_PAGE"
afterdelete="REFRESH_PAGE"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"/>
</jcr:root>
If I change the granite/ui/components/foundation/form/fileupload to granite/ui/components/coral/foundation/form/pathfield,all works fine.
Changing to cq/gui/components/authoring/dialog/fileupload results in the same behavior, no errors in the logs.
表示
返信
いいね!の合計
I'm able to reproduce the behavior that you mentioned and I plan to debug it later.
Check if this alternate solution suites your requirement-
Experiencing Adobe Experience Manager - Day CQ: AEM 62 - Touch UI Composite Image Multifield
It uses granite/ui/components/foundation/form/fileupload and works fine on 6.4.3
表示
返信
いいね!の合計
Is there any specific reason of using sling:resourceType="granite/ui/components/foundation/form/fileupload"
and not sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"?
All other resourcetypes are of coral3 except fileupload.
表示
返信
いいね!の合計
Hi, I was trying out different options, results seem to be the same with sling:resourceType="granite/ui/components/coral/foundation/form/fileupload".
表示
返信
いいね!の合計
Could you share the screenshot of dialog here? Are you using coral2 or coral3 libraries for the entire page/project?
Are you on latest SP/CFP and core components?
表示
返信
いいね!の合計
Hi Team,
Please let me also know if anyone found the solution of using image field in multifield on AEM6.4.
I am also not able to find any solution
Thank you
表示
返信
いいね!の合計
Could you share the error details/screenshot/dialog.xml?
If it shows as disabled in the multifield then the most likely, the issue is with coral2-coral3 conflicts on the page.
表示
返信
いいね!の合計
Dialog Structure where products is a multifield node:
Please also find attached dialog xml .
<?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="63 Collapsible Multifield"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<heading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Heading"
name="./heading">
<items jcr:primaryType="nt:unstructured">
<h1
jcr:primaryType="nt:unstructured"
text="H1"
value="h1"/>
<h2
jcr:primaryType="nt:unstructured"
text="H2"
value="h2"/>
<h3
jcr:primaryType="nt:unstructured"
text="H3"
value="h3"/>
<h4
jcr:primaryType="nt:unstructured"
text="H4"
value="h4"/>
<h5
jcr:primaryType="nt:unstructured"
text="H5"
value="h5"/>
<h6
jcr:primaryType="nt:unstructured"
text="H6"
value="h6"/>
</items>
</heading>
<description
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldDescription="Description"
fieldLabel="Description"
name="./description"/>
<fieldlabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Label text"
fieldLabel="Text Label"
name="./labeltext"/>
<show
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
fieldDescription="Use this key to fetch value from response"
name="./show"
text="Show Image"
value="{Boolean}true"/>
<products
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
eaem-show-on-collapse="EAEM.showProductName"
fieldLabel="Products">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./products">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<heroimage
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Hero Image"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./image"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<productheading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Enter Product Heading"
fieldLabel="Product Heading"
name="./productheading"/>
<nestedfieldsets
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Nested Items">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
name="./nestedfieldset">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<ischecked
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
fieldDescription="Use this key to fetch value from response"
name="./ischecked"
text="Is Checked"
value="{Boolean}true"/>
<link
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Select Path"
fieldLabel="Link"
name="./link"
rootPath="/content"
suffix=".html"/>
</items>
</column>
</items>
</field>
</nestedfieldsets>
</items>
</column>
</items>
</field>
</products>
</items>
</column>
</items>
</content>
</jcr:root>
No error in the console and dialog doesn't close on click of OK.
表示
返信
いいね!の合計
Just delete uploadUrl property and test.
uploadUrl="${suffix.path}"
Works fine for me on 6.4.3 and core components 2.2.2 If you require, I can share a video of same.
uploadUrlstringel
The URL to upload the file. This is only required when autoStart
is true
.
表示
返信
いいね!の合計
Hi
After removing the property ,still no luck.
Now still dialog not closed of click of ok tick mark . No error in the console. I am working on AEM 6.4.0
Please share the vedio .
表示
返信
いいね!の合計
As mentioned earlier, if the dialog doesn't close then it's most likely a js conflict on the page. Please try the same dialog in a blank project/age and see if it works
If you are have sling:resourceSuperType property configured on the component, then it could be reason of missing inherited properties from parent component.
you may try alternate resourceTypes to find the root cause -
Coral2 - granite/ui/components/foundation/form/fileupload
Coral3 - cq/gui/components/authoring/dialog/fileupload or granite/ui/components/coral/foundation/form/fileupload
FileUpload — Granite UI 1.0 documentation
**The image in dialog doesn't render because my HTL script is blank.
表示
返信
いいね!の合計
Hi,
Please find the image of a dialog after updating the steps given above.
Now upload file appears like a button. Can you please assist me how to handle this.
I have not included any external JS file and working on We.retail page to make this component work.
Thanks for all your help
表示
返信
いいね!の合計
Hi,
Now I am able to click ok and save the property in jcr:content. But now the issue is when I open the same dailog again on page the image is not appearing in the dailog .
What could be the reason behind this ?
Able to upload the image and property saved in the jcr.
Lost the image in the dailog
Thank you as always
表示
返信
いいね!の合計
I am also facing the same issue. Is this resolved?
表示
返信
いいね!の合計
I'm facing this issue as well, but getting a JS error on console. Any clue?
<heroimage
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Hero Image"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./image"
useHTML5="{Boolean}true"/>
AEM 6.4.2 and core components 2.2.2
表示
返信
いいね!の合計
this is one of sample implementations, compare your code against it -
<file | |
jcr:primaryType="nt:unstructured" | |
sling:resourceType="cq/gui/components/authoring/dialog/fileupload" | |
autoStart="{Boolean}false" | |
class="cq-droptarget" | |
fieldLabel="Image asset" | |
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"/> |
aem-core-wcm-components/.content.xml at master · adobe/aem-core-wcm-components · GitHub
alternatively, you could use granite/ui/components/coral/foundation/form/fileupload, if applicable
表示
返信
いいね!の合計