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"/>