6.4.x: How to display image path in component dialog? | Community
Skip to main content
jayv25585659
jayv25585659
Level 8
September 26, 2019
Solved

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

  • September 26, 2019
  • 4 replies
  • 5447 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by arunpatidar

    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

      }

    }

    4 replies

    U
    Adobe Employee
    user05162Adobe Employee
    Adobe Employee
    September 26, 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

      Theo_Pendle
      Theo_Pendle
      Level 8
      September 26, 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?

      arunpatidar
      Community Advisor
      arunpatidarCommunity AdvisorAccepted solution
      Community Advisor
      September 26, 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

        }

      }

      Arun Patidar
      kpawan
      kpawan
      Level 2
      April 18, 2021

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

        Terms & ConditionsAccessibility statement

        Loading footer...