Adding Image To A Component Dialog

[Sanjana12]

How to add an image to a component dialog? Please help

[Mohit_KBansal]

Hello @Sanjana12 

Check Image core component [1] [2], which uses the image in component dialog.

[1] https://www.aemcomponents.dev/content/core-components-examples/library/core-content/image.html

[2] https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wc... 

[muskankapoor]

hi @Sanjana12 

you can add this to your content.xml file to add an image

<Image
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    fieldLabel="Image"
    fileNameParameter="./ImageName"
    fileReferenceParameter="./ImageReference"
    name="./Image"
    />

[HeenaMadan · Accepted solution]

In _cq_dialog/content.xml, add below line of code if you want to upload file

<file
    jcr:primaryType="nt:unstructured"
    sling:hideResource="{Boolean}true"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    autoStart="{Boolean}false"
    class="cq-droptarget"
    fieldLabel="Image"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
    multiple="{Boolean}false"
    name="./file"
    required="{Boolean}true"
    title="Upload Image Asset"
    uploadUrl="${suffix.path}"
    useHTML5="{Boolean}true"/>