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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Use image in HTL uploaded from fileupload

Avatar

Level 1

Hello

I have a problem, I don't know how to call in HTL an image that I uploaded through fileupload in a component, this is the structure of my fileupload in my cq:dialog

 

<fileupload

      jcr:primaryType="nt:unstructured"                                                                                                                  sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

      class="cq-droptarget"

      fieldLabel="Imagen lateral del vehículo"

      fileNameParameter="./fileNameSide"

      fileReferenceParameter="./fileReferenceSide"

      mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"

      name="./sideImage"/>

 

 

Thank you very much

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Johnhenao10  Image source path would be saved in JCR with "fileReferenceParameter" property. Create the sling model for this component and use the below snippet

 

@Inject
private String fileReferenceSide;

public String getFileReferenceSide() {
return fileReferenceSide;
}

 

In your HTL, refer 

<sly data-sly-use.imageTest="<<Your Sling model class name>>"

<img class="section-container-card-2--image" src="${imageTest.fileReferenceSide@ context = 'uri'}" alt="${imageTest.fileReferenceSide}"/>

</sly>

 

Hope this help.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

@Johnhenao10  Image source path would be saved in JCR with "fileReferenceParameter" property. Create the sling model for this component and use the below snippet

 

@Inject
private String fileReferenceSide;

public String getFileReferenceSide() {
return fileReferenceSide;
}

 

In your HTL, refer 

<sly data-sly-use.imageTest="<<Your Sling model class name>>"

<img class="section-container-card-2--image" src="${imageTest.fileReferenceSide@ context = 'uri'}" alt="${imageTest.fileReferenceSide}"/>

</sly>

 

Hope this help.