Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

jayv25585659
Level 6
Level 6

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
Arun_Patidar
Correct answer by
Community Advisor
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

  }

}

View solution in original post

4 Replies
jbrar
Employee
Employee

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
Community Advisor
Community Advisor

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?

Arun_Patidar
Correct answer by
Community Advisor
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

  }

}

View solution in original post

kpawan
Level 1
Level 1

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