6.4.x: How to display image path in component dialog?

Question

I have several components here which uses image (examples: background image in a div or a img tag for displaying images).

I want to:

display the image/asset path when I open dialog if an image has been imported already
display blank/empty string if no image has been imported

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

arunpatidar · Accepted Answer

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

}

kpawan · Answer

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

Sign up

Login with SSO

Login to the community

Login with SSO