Turn off allowUpload in TouchUI

[cjantoli]

So following the documentation here I should be able to disable the allowUpload feature to force authors to use just the Assets:
https://docs.adobe.com/docs/en/aem/6-1/develop/components/components-develop.html#Disable%20Upload%2...

I am attempting to do this with TouchUI and not with classic. 

I have attempted

Boolean
allowUpload="{Boolean}false"

String
allowUpload="false"

[Lokesh_Shivalingaiah]

the document is about turning off when for the classic dialog and not for Touch UI.

[Lokesh_Shivalingaiah]

I dont see any option to turn it off on Touch UI dialog. Please raise a support ticket for the same.

[cjantoli]

I put in a ticket and I will add the response for the greater good. 

So on your file node you want to add a disabled property and set the value to true

/libs/foundation/components/image/cq:dialog/content/items/column/items/file

disabled="{Boolean}true"

This will only disable the button. Currently there is no visible spot for the author to drop an image from the Assets, but they still can. 

[kautuk_sahni]

Hi cjantoli 

Yes, its a miss in documentation. Its only for classic UI.

//

allowUpload

public abstract boolean allowUpload

Used for Classic UI only Flag if uploading a file is allowed

Returns:

boolean

Default:

true

Link:- http://code.citytechinc.com/cq-component-maven-plugin/apidocs/com/citytechinc/cq/component/annotatio...()

We will let documentation know about this.

Thanks and Regards

Kautuk Sahni

[cjantoli · Accepted solution]

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. 

[cjantoli]

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. 

[Lokesh_Shivalingaiah]

This is really helpful !! Thanks for sharing....

[Lokesh_Shivalingaiah]

This is really helpful !! Thanks for sharing....

[Anton_Smulskiy]

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:

[manish_anand]

Hi,

is there anyway to remove Generate Preview button as well?

[edubey]

Yes,

Use sling resource merger concept

https://helpx.adobe.com/experience-manager/6-2/sites/developing/using/sling-resource-merger.html