AEM 6.2 cq:dialog Image upload preview not working

aem, aem-6

Solution

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

Problem

This is my first AEM project, I have a image upload in a component which is working, after uploading if i open settings of component to change the image, preview is not working as you can see in below picture. cq:dialog banner file upload properties If i try to open image with `/content/xxxDetails/xxx/_jcr_content/par/banner/bannerImage` i can able to access image. How do i fix the preview problem, I thing it's basic question but please help me as this is my first project. EDIT: cq:dialog ``` <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/tabs" type="nav"/> <items jcr:primaryType="nt:unstructured"> <banner jcr:primaryType="nt:unstructured" jcr:title="Banner Properties" sling:resourceType="granite/ui/components/foundation/section"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <headerText jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Heading Text" name="./header"/> <SubText jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textarea" fieldLabel="SubHeading" name="./subtext"/> <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="./bannerImage" title="Upload Image" uploadUrl="${suffix.path}" useHTML5="{Boolean}true"/> </items> </columns> </items> </banner> </items> </content> </jcr:root> ``` Error Logs ``` 09.05.2017 18:29:15.949 *ERROR* [0:0:0:0:0:0:0:1 [1494334755944] POST /content/xxxDetails/xxx/_jcr_content/par/banner HTTP/1.1] org.apache.sling.servlets.post.impl.operations.ModifyOperation Exception during response processing. org.apache.sling.api.resource.PersistenceException: Unable to commit changes to session. at org.apache.sling.jcr.resource.internal.helper.jcr.JcrResourceProvider.commit(JcrResourceProvider.java:482) at org.apache.sling.resourceresolver.impl.providers.stateful.AuthenticatedResourceProvider.commit(AuthenticatedResourceProvider.java:215) at org.apache.sling.resourceresolver.impl.helper.ResourceResolverControl.commit(ResourceResolverControl.java:411) at org.apache.sling.resourceresolver.impl.ResourceResolverImpl.commit(ResourceResolverImpl.java:1224) at org.apache.sling.servlets.post.AbstractPostOperation.run(AbstractPostOperation.java:129) at org.apache.sling.servlets.post.impl.SlingPostServlet.doPost(SlingPostServlet.java:202) at org.apache.sling.api.servlets.SlingAllMethodsServlet.mayService(SlingAllMethodsServlet.java:149) at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.java:345) at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.java:376) at org.apache.sling.engine.impl.request.RequestData.service(RequestData.java:546) at org.apache.sling.engine.impl.filter.SlingComponentFilterChain.render(SlingComponentFilterChain.java:44) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:77) at com.day.cq.personalization.impl.TargetComponentFilter.doFilter(TargetComponentFilter.java:96) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.wcm.core.impl.WCMDebugFilter.doFilterWithErrorHandling(WCMDebugFilter.java:187) at com.day.cq.wcm.core.impl.WCMDebugFilter.doFilter(WCMDebugFilter.java:154) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.wcm.core.impl.WCMComponentFilter.filterRootInclude(WCMComponentFilter.java:362) at com.day.cq.wcm.core.impl.WCMComponentFilter.doFilter(WCMComponentFilter.java:177) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.engine.impl.SlingRequestProcessorImpl.processComponent(SlingRequestProcessorImpl.java:282) at org.apache.sling.engine.impl.filter.RequestSlingFilterChain.render(RequestSlingFilterChain.java:49) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:77) at com.adobe.cq.social.ugcbase.security.impl.SaferSlingPostServlet.doFilter(SaferSlingPostServlet.java:126) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.dam.core.impl.assetlinkshare.AdhocAssetShareAuthHandler.doFilter(AdhocAssetShareAuthHandler.java:381) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.dam.core.impl.servlet.ActivityRecordHandler.doFilter(ActivityRecordHandler.java:155) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:73) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:73) at com.adobe.granite.requests.logging.impl.RequestLoggerImpl.doFilter(RequestLoggerImpl.java:127) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.granite.csrf.impl.CSRFFilter.doFilter(CSRFFilter.java:220) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.security.impl.ContentDispositionFilter.doFilter(ContentDispositionFilter.java:181) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.wcm.core.impl.AuthoringUIModeServiceImpl.doFilter(AuthoringUIModeServiceImpl.java:367) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.wcm.core.impl.warp.TimeWarpFilter.doFilter(TimeWarpFilter.java:106) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.wcm.mobile.core.impl.redirect.RedirectFilter.doFilter(RedirectFilter.java:248) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.aem.community.core.filters.LoggingFilter.doFilter(LoggingFilter.java:50) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.engine.impl.debug.RequestProgressTrackerLogFilter.doFilter(RequestProgressTrackerLogFilter.java:95) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.analytics.provisioning.impl.UserAuthenticationRequestFilter.doFilter(UserAuthenticationRequestFilter.java:119) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.cq.social.commons.cors.CORSAuthenticationFilter.doFilter(CORSAuthenticationFilter.java:91) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.wcm.foundation.forms.impl.FormsHandlingServlet.doFilter(FormsHandlingServlet.java:285) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.granite.optout.impl.OptOutFilter.doFilter(OptOutFilter.java:74) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.cq.history.impl.HistoryRequestFilter.doFilter(HistoryRequestFilter.java:107) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.day.cq.wcm.core.impl.WCMRequestFilter.doFilter(WCMRequestFilter.java:90) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.cq.mcm.campaign.servlets.CampaignCopyTracker.doFilter(CampaignCopyTracker.java:100) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.rewriter.impl.RewriterFilter.doFilter(RewriterFilter.java:83) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.granite.httpcache.impl.InnerCacheFilter.doFilter(InnerCacheFilter.java:77) at com.adobe.granite.httpcache.impl.InnerCacheFilter.doFilter(InnerCacheFilter.java:56) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.i18n.impl.I18NFilter.doFilter(I18NFilter.java:129) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.granite.rest.impl.servlet.ApiResourceFilter.doFilter(ApiResourceFilter.java:67) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.bgservlets.impl.BackgroundServletStarterFilter.doFilter(BackgroundServletStarterFilter.java:169) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at com.adobe.granite.resourceresolverhelper.impl.ResourceResolverHelperImpl.doFilter(ResourceResolverHelperImpl.java:84) at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68) at org.apache.sling.engine.impl.SlingRequestProcessorImpl.doProcessRequest(SlingRequestProcessorImpl.java:151) at org.apache.sling.engine.impl.SlingMainServlet.service(SlingMainServlet.java:216) at org.apache.felix.http.base.internal.handler.ServletHandler.handle(ServletHandler.java:85) at org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:79) at com.adobe.granite.license.impl.LicenseCheckFilter.doFilter(LicenseCheckFilter.java:308) at org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) at org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) at org.apache.felix.http.sslfilter.internal.SslFilter.doFilter(SslFilter.java:89) at org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) at org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) at org.apache.sling.security.impl.ReferrerFilter.doFilter(ReferrerFilter.java:290) at org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) at org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) at org.apache.sling.i18n.impl.I18NFilter.doFilter(I18NFilter.java:129) at org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) at org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) at org.apache.sling.featureflags.impl.FeatureManager.doFilter(FeatureManager.java:116) at org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) at org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) at org.apache.sling.engine.impl.log.RequestLoggerFilter.doFilter(RequestLoggerFilter.java:75) at org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) at org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) at org.apache.felix.http.base.internal.dispatch.Dispatcher.dispatch(Dispatcher.java:124) at org.apache.felix.http.base.internal.DispatcherServlet.service(DispatcherServlet.java:61) at javax.servlet.http.HttpServlet.service(HttpServlet.java:725) at org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:812) at org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:587) at org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:221) at org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1127) at org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:515) at org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:185) at org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1061) at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:141) at org.eclipse.jetty.server.handler.ContextHandlerCollection.handle(ContextHandlerCollection.java:215) at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:97) at org.eclipse.jetty.server.Server.handle(Server.java:499) at org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:311) at org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:257) at org.eclipse.jetty.io.AbstractConnection$2.run(AbstractConnection.java:544) at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:635) at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:555) at java.lang.Thread.run(Unknown Source) Caused by: javax.jcr.nodetype.ConstraintViolationException: OakConstraint0030: Uniqueness constraint violated at path [/] for one of the property in [jcr:uuid] having value 6483de35-5fc6-437e-a40d-c9a074ee96ad at org.apache.jackrabbit.oak.api.CommitFailedException.asRepositoryException(CommitFailedException.java:225) at org.apache.jackrabbit.oak.api.CommitFailedException.asRepositoryException(CommitFailedException.java:212) at org.apache.jackrabbit.oak.jcr.delegate.SessionDelegate.newRepositoryException(SessionDelegate.java:670) at org.apache.jackrabbit.oak.jcr.delegate.SessionDelegate.save(SessionDelegate.java:496) at org.apache.jackrabbit.oak.jcr.session.SessionImpl$8.performVoid(SessionImpl.java:419) at org.apache.jackrabbit.oak.jcr.delegate.SessionDelegate.performVoid(SessionDelegate.java:274) at org.apache.jackrabbit.oak.jcr.session.SessionImpl.save(SessionImpl.java:416) at sun.reflect.GeneratedMethodAccessor45.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at org.apache.sling.jcr.base.SessionProxyHandler$SessionProxyInvocationHandler.invoke(SessionProxyHandler.java:116) at com.sun.proxy.$Proxy7.save(Unknown Source) at org.apache.sling.jcr.resource.internal.helper.jcr.JcrResourceProvider.commit(JcrResourceProvider.java:480) ... 115 common frames omitted Caused by: org.apache.jackrabbit.oak.api.CommitFailedException: OakConstraint0030: Uniqueness constraint violated at path [/] for one of the property in [jcr:uuid] having value 6483de35-5fc6-437e-a40d-c9a074ee96ad at org.apache.jackrabbit.oak.plugins.index.property.PropertyIndexEditor.checkUniquenessConstraints(PropertyIndexEditor.java:320) at org.apache.jackrabbit.oak.plugins.index.property.PropertyIndexEditor.updateIndex(PropertyIndexEditor.java:300) at org.apache.jackrabbit.oak.plugins.index.property.PropertyIndexEditor.leave(PropertyIndexEditor.java:243) at org.apache.jackrabbit.oak.plugins.index.IndexUpdate.leave(IndexUpdate.java:252) at org.apache.jackrabbit.oak.spi.commit.VisibleEditor.leave(VisibleEditor.java:63) at org.apache.jackrabbit.oak.spi.commit.CompositeEditor.leave(CompositeEditor.java:74) at org.apache.jackrabbit.oak.spi.commit.EditorDiff.process(EditorDiff.java:56) at org.apache.jackrabbit.oak.spi.commit.EditorHook.processCommit(EditorHook.java:54) at org.apache.jackrabbit.oak.spi.commit.CompositeHook.processCommit(CompositeHook.java:61) at org.apache.jackrabbit.oak.spi.commit.CompositeHook.processCommit(CompositeHook.java:61) at org.apache.jackrabbit.oak.plugins.segment.SegmentNodeStore$Commit.prepare(SegmentNodeStore.java:488) at org.apache.jackrabbit.oak.plugins.segment.SegmentNodeStore$Commit.optimisticMerge(SegmentNodeStore.java:519) at org.apache.jackrabbit.oak.plugins.segment.SegmentNodeStore$Commit.execute(SegmentNodeStore.java:575) at org.apache.jackrabbit.oak.plugins.segment.SegmentNodeStore.merge(SegmentNodeStore.java:238) at org.apache.jackrabbit.oak.spi.state.ProxyNodeStore.merge(ProxyNodeStore.java:43) at org.apache.jackrabbit.oak.core.MutableRoot.commit(MutableRoot.java:247) at org.apache.jackrabbit.oak.jcr.delegate.SessionDelegate.commit(SessionDelegate.java:347) at org.apache.jackrabbit.oak.jcr.delegate.SessionDelegate.save(SessionDelegate.java:494) ... 124 common frames omitted ```

Original source