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

Avatar

Avatar

jayv25585659

Avatar

jayv25585659

jayv25585659

25-09-2019

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

999

Correct Answer

829

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

999

Correct Answer

829
Arun_Patidar
MVP

26-09-2019

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

  }

}

Answers (2)

Answers (2)

Avatar

Avatar

jbrar

Employee

Avatar

jbrar

Employee

jbrar
Employee

26-09-2019

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

Avatar

Theo_Pendle

MVP

Avatar

Theo_Pendle

MVP

Theo_Pendle
MVP

26-09-2019

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?