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

[jayv25585659]

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

I want to:

1. display the image/asset path when I open dialog if an image has been imported already
2. 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

[Jaideep_Brar]

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

[2] AEM Components - The Basics

[Theo_Pendle]

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?

[arunpatidar · Accepted 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

  }

}

[kpawan]

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