AEM 6.2 cq:dialog Image upload preview not working

You might be facing this issue when uploading the file from local disk instead of referencing it from DAM. The reason being, when the file is uploaded it is created as a nt:file under your components node with the name bannerImage (the name property provided in the dialog). Whereas, AEM is expecting with the name file.

If quick fix is what you need, change your name for bannerImage as shown below. Also ensure your component inherits from foundation/components/parbase so that the img selector is handled by the servlet.

<bannerImage
    jcr:primaryType="nt:unstructured"                          
    sling:resourceType="granite/ui/components/foundation/form/fileupload"
    autoStart="{Boolean}false"
    class="cq-droptarget"
    fieldLabel="Banner"
    fileNameParameter="./bannerImgName"
    fileReferenceParameter="./bannerImgRef"
    mimeTypes="[image]"
    multiple="{Boolean}false"
    name="./file"
    title="Upload Image"
    uploadUrl="${suffix.path}"
    useHTML5="{Boolean}true"/>

But it is best if the image is allowed to be created as a child of the current component (example can be found at wcm/foundation/components/textimage). Inorder to achieve that, you can change the bannerImage configuration as shown below, and additionally add a hidden field to set the sling:resourceType for the image node.

<bannerImage
        jcr:primaryType="nt:unstructured"                          
        sling:resourceType="granite/ui/components/foundation/form/fileupload"
        autoStart="{Boolean}false"
        class="cq-droptarget"
        fieldLabel="Banner"
        fileNameParameter="./image/bannerImgName"
        fileReferenceParameter="./image/bannerImgRef"
        mimeTypes="[image]"
        multiple="{Boolean}false"
        name="./image/file"
        title="Upload Image"
        uploadUrl="${suffix.path}"
        useHTML5="{Boolean}true"/>
<headerText
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/hidden"
        name="./image/sling:resourceType"
        value="wcm/foundation/components/image"/>

Tags:

Aem

Aem 6