I have several components here which uses image (examples: background image in a div or a img tag for displaying images).
I want to:
Any ideas on how to do this? I found something that may work (Image Path in Touch UI dialog (AEM 6.1 and AEM 6.2)
As a test, I placed a console.log("something here") just before $(document) and nothing is showing up in the console.
This is the xml declaration for the property that contains the image path in the node
<file
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Image asset"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"
allowUpload="{Boolean}false" />
Can you please help? Thanks
Solved! Go to Solution.
You can write a javascript which will check the image params and get you the path and create the dom to show the path.
E.g.
if ($inputEle.hasClass('coral3-FileUpload')) {
var filereference = $inputEle.find('input[data-cq-fileupload-parameter="filereference"]').val();
if (filereference !== undefined && filereference !== "false" && filereference !== "") {
value = filereference;
// cretae HTML DOM with avlue
}
}
Views
Replies
Total Likes
At the first glance the dialog looks good. AEM uses the file reference Parameter to map the name of file to the jcr. You can refer to a detailed explaination at [1] and grep for "cq:dropTargets" at [2]
[1] AEM Developer Learning : cq:dropTagets in cq:editConfig Node in AEM
If you are not getting the log in your console then your JS file is not being loaded. Did you maybe miss step 5 in the article you referenced?
Views
Replies
Total Likes
You can write a javascript which will check the image params and get you the path and create the dom to show the path.
E.g.
if ($inputEle.hasClass('coral3-FileUpload')) {
var filereference = $inputEle.find('input[data-cq-fileupload-parameter="filereference"]').val();
if (filereference !== undefined && filereference !== "false" && filereference !== "") {
value = filereference;
// cretae HTML DOM with avlue
}
}
Views
Replies
Total Likes
This seems an old post but I got similar requirement to show the image path that author can see and copy and paste some where and I end up in writing a few lines of code which are more generalized and can handle single as well as multifield components and thus updating here if this helps anyone in future -
Code is committed in GitHub at : https://github.com/er-kpawan/aem-project-issue-fix/commit/c2ba0ed968b2ba0b9be65d9b2d8eebf15faa5b00
Hope this helps!!
Views
Likes
Replies