Turn off allowUpload in TouchUI

How to turn off the allowUpload in the Image component. 

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

1. Create your image component 
   1. /apps/<your-app>/components/content
      1. Create a node image jcr:primaryType cq:Component
      2. Give it the properties
         1. sling:resourceSuperType = wcm/foundation/components/image
         2. 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.

1. Under your new image node create a the node cq:dialog jcr:primaryType nt:unstructured
2. Give it 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. 

1. 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 

1. 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. 

1. Navigate to your file node
   • /apps/<your-app>/components/content/image/cq:dialog/content/items/image/items/column/items/file
2. 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. 

Update:

in AEM 6.2 allowUpload="false" works in the same way as it works in Classic UI.

Just add this property to the node "file" of sling:resourceType = 'granite/ui/components/foundation/form/fileupload'

before:

after: