Expand my Community achievements bar.

SOLVED

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

Avatar

Level 9

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

  }

}



Arun Patidar

View solution in original post

4 Replies

Avatar

Employee Advisor

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

Avatar

Level 10

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?

Avatar

Correct answer by
Community Advisor

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

  }

}



Arun Patidar

Avatar

Level 2

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

 

kpawan_0-1618767068022.png

 

Hope this helps!!