Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Convert html5smartfile xtype in TouchUI

Avatar

Level 4

In the ClassUI we had very simple page property syntax providing a way for author to upload a file to the page. Like this..

                        <cv

                            jcr:primaryType="cq:Widget"

                            fieldLabel="CV"

                            name="./file"

                            fileNameParameter="./fileName"

                            fileReferenceParameter="./fileReference"

                            ddGroups="[media]"

                            xtype="html5smartfile"/>

Screen Shot 2018-02-15 at 1.55.19 PM.png

Obviously we need to transition to the Touch UI at some point, so I have been working to implement this in the TouchUI. Most CQ widgets and xtypes are very easy to convert, but for whatever reason I cannot get the fileUpload to work.

This is the documentation I am trying to use

FileUpload — Granite UI 1.0 documentation

Here is what I have

<fileupload

    jcr:primaryType="nt:unstructured"

    jcr:title="Upload "

    sling:resourceType="granite/ui/components/foundation/form/fieldset">

    <items jcr:primaryType="nt:unstructured">

      <file

          jcr:primaryType="nt:unstructured"

          sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"

          autoStart="{Boolean}false"

          fieldLabel="Upload files"

          mimeTypes="[application/pdf]"

          multiple="{Boolean}false"

          name="./file"

          sizeLimit="100000000"

          text="Upload file"/>

    </items>

</fileupload>

It renders a button to upload a file. It allows selection of a file. Upon submission of the dialog, I do not see anything relating to the file in the POST request. Since this is an existing production page component, I need to follow the existing patterns and save the file to a nt:file node under the page's jcr:content node (e.g. page/jcr:content/file). I deally it would also support setting fileReferences too as Classic UI did, but the primary use case is to upload and manage files loaded under the pages.

15 Replies

Avatar

Level 10

You should never have to convert Classic xtype to Granite Types. Granite types have their own widgets.

FileUpload — Granite UI 1.0 documentation

Avatar

Level 10

If this is not working - there may be a bug - file a support ticket to get this fixed.

Avatar

Level 4

OK. "convert" isn't really the right word. The point of writing the ticket here was to get help with the Granite fileUpload. I already had that link to the documentation but is not helping.

Avatar

Level 4

Thank you. I was looking to reference a cq:dialog from an OOTB file upload component such as  http://localhost:4502/crx/de/index.jsp#/libs/foundation/components/form/upload but this component only has dialog.xml.

Avatar

Level 4

This seems like it might work.

<file

    jcr:primaryType="nt:unstructured"

    jcr:title="CV File"

    title="CV"

    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

    uploadUrl="${suffix.path}"

    page="${empty param.item ? requestPathInfo.suffix : param.item}"

    useHTML5="{Boolean}true"

    multiple="{Boolean}false"

    autoStart="{Boolean}false"

    async="{Boolean}false"

    fileNameParameter="./fileName"

    fileReferenceParameter="./fileReference"

    name="./file"

    fieldLabel="Upload CV">

</file>

Ideally the existing file would be pre-populated, and it would execute cleanly without the Java exceptions. There are also JS errors in the console (500). The Java exceptionis shown below. But at least the POST operation appears to work.

16.02.2018 12:42:41.339 *ERROR* [0:0:0:0:0:0:0:1 [1518802961331] POST /mnt/overlay/wcm/core/content/sites/properties.html HTTP/1.1] org.apache.sling.servlets.post.impl.operations.ModifyOperation Exception during response processing.

java.lang.UnsupportedOperationException: create 'file.sftmp' at /mnt/overlay/wcm/core/content/sites/properties

at org.apache.sling.resourceresolver.impl.helper.ResourceResolverControl.create(ResourceResolverControl.java:383)

at org.apache.sling.resourceresolver.impl.ResourceResolverImpl.create(ResourceResolverImpl.java:1159)

at org.apache.sling.servlets.post.impl.helper.SlingFileUploadHandler.setFile(SlingFileUploadHandler.java:235)

at org.apache.sling.servlets.post.impl.helper.SlingFileUploadHandler.setFile(SlingFileUploadHandler.java:555)

at org.apache.sling.servlets.post.impl.operations.ModifyOperation.writeContent(ModifyOperation.java:409)

at org.apache.sling.servlets.post.impl.operations.ModifyOperation.doRun(ModifyOperation.java:101)

at org.apache.sling.servlets.post.AbstractPostOperation.run(AbstractPostOperation.java:97)

at org.apache.sling.servlets.post.impl.SlingPostServlet.doPost(SlingPostServlet.java:205)

at org.apache.sling.api.servlets.SlingAllMethodsServlet.mayService(SlingAllMethodsServlet.java:149)

at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.java:346)

at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.java:378)

at org.apache.sling.engine.impl.request.RequestData.service(RequestData.java:552)

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.wcm.core.impl.WCMDebugFilter.doFilter(WCMDebugFilter.java:156)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.day.cq.wcm.core.impl.WCMComponentFilter.filterRootInclude(WCMComponentFilter.java:375)

at com.day.cq.wcm.core.impl.WCMComponentFilter.doFilter(WCMComponentFilter.java:190)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.day.cq.personalization.impl.TargetComponentFilter.doFilter(TargetComponentFilter.java:96)

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.day.cq.dam.core.impl.servlet.ActivityRecordHandler.doFilter(ActivityRecordHandler.java:154)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.day.cq.dam.core.impl.assetlinkshare.AdhocAssetShareAuthHandler.doFilter(AdhocAssetShareAuthHandler.java:436)

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 com.day.cq.wcm.core.impl.warp.TimeWarpFilter.doFilter(TimeWarpFilter.java:109)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

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 org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:73)

at com.adobe.granite.rest.impl.servlet.ApiResourceFilter.doFilter(ApiResourceFilter.java:70)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.adobe.granite.requests.logging.impl.RequestLoggerImpl.doFilter(RequestLoggerImpl.java:126)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.adobe.granite.rest.assets.impl.AssetContentDispositionFilter.doFilter(AssetContentDispositionFilter.java:96)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.adobe.granite.csrf.impl.CSRFFilter.doFilter(CSRFFilter.java:217)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at org.apache.sling.security.impl.ContentDispositionFilter.doFilter(ContentDispositionFilter.java:180)

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.mobile.core.impl.redirect.RedirectFilter.doFilter(RedirectFilter.java:248)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at edu.umich.lsa.dp.filters.LoggingFilter.doFilter(LoggingFilter.java:56)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.cognifide.cq.includefilter.DynamicIncludeFilter.doFilter(DynamicIncludeFilter.java:82)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at org.apache.sling.engine.impl.debug.RequestProgressTrackerLogFilter.doFilter(RequestProgressTrackerLogFilter.java:107)

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.FormsHandlingServletHelper.handleFilter(FormsHandlingServletHelper.java:221)

at com.day.cq.wcm.foundation.forms.impl.FormsHandlingServlet.doFilter(FormsHandlingServlet.java:138)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.adobe.granite.optout.impl.OptOutFilter.doFilter(OptOutFilter.java:76)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.day.cq.wcm.foundation.forms.FormsHandlingServletHelper.handleFilter(FormsHandlingServletHelper.java:221)

at com.adobe.cq.wcm.core.components.internal.servlets.CoreFormHandlingServlet.doFilter(CoreFormHandlingServlet.java:125)

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.history.impl.HistoryRequestFilter.doFilter(HistoryRequestFilter.java:122)

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:81)

at com.adobe.granite.httpcache.impl.InnerCacheFilter.doFilter(InnerCacheFilter.java:60)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at org.apache.sling.i18n.impl.I18NFilter.doFilter(I18NFilter.java:138)

at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:68)

at com.adobe.granite.resourceresolverhelper.impl.ResourceResolverHelperImpl.doFilter(ResourceResolverHelperImpl.java:83)

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.SlingRequestProcessorImpl.doProcessRequest(SlingRequestProcessorImpl.java:151)

at org.apache.sling.engine.impl.SlingMainServlet.service(SlingMainServlet.java:219)

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:96)

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:295)

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:138)

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:72)

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:128)

at org.apache.felix.http.base.internal.dispatch.DispatcherServlet.service(DispatcherServlet.java:49)

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(Thread.java:748)

Avatar

Level 10

any js errors in console?

I’d start with a working configuration something picked up from otb image dialog eg.

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

Avatar

Level 4

I tried your code suggestion. It does not work on Page Properties dialog for me.  This resource type is inoperative

sling:resourceType="granite/ui/components/foundation/form/fileupload"

it results in 404 for the request...

http://localhost:4502/mnt/overlay/wcm/core/content/sites/undefined.json?_=1518805826262

It might work better in the context of a component on a page, but not under /mnt/overlay/wcm/core/content/sites/properties.html

Really painful decision Adobe made with 6.3 to move page properties off the page to /mnt/overlay/wcm/core/content/sites/properties.html

At this point I know that data which were stored in Page Properties (jcr:content) should be placed in component. Making this change now is difficult because the dialogs and component would be pointed at component node (jcr:content/new-component).  I might me able to a WCMUsePojo to bridge this. But it feels like terrible design given the Sling Model was used to pull all the fields from the jcr:content node. (Made worse by @PostConstruct methods not executing in 6.3)

It would be really great if I could point a component dialog at the current page. Do you have any ideas how to set the datapath in component dialog to point it at the page properties? Given a component on the page (my-page/jcr:content/new-component), is there a way to use Form to set data path using a some variable such as  ${currentPage} ?

Form — Granite UI 1.0 documentation

This would save my life.

Avatar

Level 10

If you were writing a normal AEM component using HTL - this works - but does not work in a page prop dialog?

Avatar

Level 4

Correct. It works great as a Component, and even saves from Page Properties. However, when used from the Page Properties it blows up the Java Exception listed above immediately after  selecting a file.

Since I can't really promote code that generates errors, I'm looking for another option. If I could write to Page Properties from a component dialog, then that's definitely what I would do. That would also help with the pages images (co-called thumbnail tab), since I could then make use of the in place editing.

Avatar

Level 10

Have you tried to build a custom AEM component (maybe using WCMUsePojo) that has the dialog you need and then use that component (resource type)?

Avatar

Level 4

Yes that would definitely work if this were a brand new page. We are coming from Classic UI and have bunch of content which used page properties. I don't want to have to undergo a content migration to adopt the new interface just because Adobe decided to disconnect the page properties from the page.

Avatar

Level 10

I cannot think of other course of action other than a new component here. You can log a support ticket and see if this issue has been encountered before. Its an upgrade issue and they have dealt upgrade issues.

Avatar

Level 4

Ok thanks for your input. It does seem odd that one cannot use the Granite Form (see attached docs) in a component dialog to set the data path target to the current page.

Form — Granite UI 1.0 documentation

Avatar

Level 10

All granite types i have used are standalone components which nicely. This coukd be an upgrade issue.