TouchUI Image disable upload in dialog

Question

In classic UI we were able to let users drag images and drop them to one of the tabs in the dialogs. However accordingly to Adobe's documentation in TouchUI we should use fileupload instead of html5smartimage.

html5smartfile, html5smartimage -> granite/ui/components/foundation/form/fileupload https://docs.adobe.com/docs/en/aem/6-0/develop/the-basics/touch-ui-concepts.html

Is there a way to disable the file upload functionality on the TouchUI? I am thinking that Adobe is encouraging users to use the dropTarget feature of the TouchUI instead of a tab in the dialog. However, we would like to make sure that the experience is consistent and we would like to use a tab in the dialog.

Thoughts?

Answer 1

You only need to add allowUpload="{Boolean}false" in the definition of granite/ui/components/foundation/form/fileupload field in dialog

Answer 2

Deleting uploadUrl="${suffix.path}" disables the upload button in the dialog

Answer 3

This is how I turned off the allowUpload in the Image component and updated the dialog to display the Drop Area that shows up when you drag an item from the Asset sidebar.

So in TouchUI dialogs you will need to create your new image component.

Create your image component

/apps/<your-app>/components/content

Create a node image jcr:primaryType cq:Component

Give it the properties

sling:resourceSuperType = wcm/foundation/components/image
componentGroup = <your component group>

The sling:resourceSuperType will now inherit all the properties, functionality and dialog of the wcm/foundation/components/image

Now we want to create an TouchUI cq:dialog overlay.

Under your new image node create a the node cq:dialog jcr:primaryType nt:unstructured

Give it the properties

jcr:title="Image"
 sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Image"

Because our component is inheriting from the foundation image component we are also inheriting the dialogs. So much like the jsps back in 5.6 we only have to overwrite the parts we need to.

Create the structure that so we can overwrite some properties of the file node (/content/items/image/items/column/items)

• Under cq:dialog create a new node content jcr:primaryType nt:unstructured
  • Under content create new node items jcr:primaryType nt:unstructured
    • Under items create image jcr:primaryType nt:unstructured
      • Under image create items jcr:primaryType nt:unstructured
        • Under items create column jcr:primaryType nt:unstructured
          • Under column create items jcr:primaryType nt:unstructured

Now we are going to disable the file upload option

Under the file node create a new property disabled Boolean value of true

This disables the upload button and the authors can drag and drop an item from the sidebar, but I would like to have my UI a little more intuitive, by making the area they can drop target visible.

In CRXDE Lite navigate to

/libs/granite/ui/components/foundation/form/fileupload

Copy the fileupload folder

Navigate back to your image component and paste the item.

Open the fileupload.jsp in CRXDE

At line 240 right under fieldAttrs.addClass("coral-Form-field"); Add this

// show drop target when disabled
if(cfg.get("disabled", false)){
    fieldAttrs.addClass("is-active");
}

What this will do is automatically add the "is-active" css class to the drop target input for the file upload. This in turn displays the target that you see when dragging an image from the Asset Finder.

Then at line 253 under buttonAttrs.addClass("coral-FileUpload-trigger coral-Button"); Add this

// hide button when button is disabled
if(cfg.get("disabled", false)){
    buttonAttrs.add("style","display:none;");
}

This will hide the disabled Upload Image button so there is no confusion why the button is disabled.

Now we have to update your dialog to use our new form for the fileupload.

Navigate to your file node

/apps/<your-app>/components/content/image/cq:dialog/content/items/image/items/column/items/file

Add the property

sling:resourceType="/apps/<your-app>/components/content/image/form/fileupload"

Now you can drop your image component on the page and see your new dialog.