Smartphone

Goal

Disable Browse and Upload file in FileUpload widget - /libs/granite/ui/components/foundation/form/fileupload of Image component - /libs/foundation/components/image, in Touch UI

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-fileupload-widget-disable-upload

2) Create node /apps/eaem-fileupload-widget-disable-upload/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog and dependencies to underscore

3) Create file (nt:file) /apps/eaem-fileupload-widget-disable-upload/clientlib/js.txt and add

                       disable-upload.js

4) Create file (nt:file) /apps/eaem-fileupload-widget-disable-upload/clientlib/disable-upload.js and add the following code

(function ($, $document, gAuthor) {
 var COMPONENT = "foundation/components/image",
 FILE_UPLOAD = ".coral-FileUpload",
 FILE_UPLOAD_BROWSE = ".cq-FileUpload-browse",
 DATA_ATTR_FILE_UPLOAD = "fileUpload";

 if(!gAuthor){
 return;
 }

 $document.on(dialog-ready, disableUpload);

 function disableUpload(){
 var editable = gAuthor.DialogFrame.currentDialog.editable;

 //if not an image component dialog, return
 if((editable.type !== COMPONENT)){
 return;
 }

 var $fileUploads = $(FILE_UPLOAD), cuiFileUpload, $uploadBrowse;

 $fileUploads.each(function(index, fileUpload){
 cuiFileUpload = $(fileUpload).data(DATA_ATTR_FILE_UPLOAD);

 $uploadBrowse = cuiFileUpload.$element.find(FILE_UPLOAD_BROWSE);

 $uploadBrowse.off().on("click tap", function(){
 showErrorAlert("Upload Disabled");
 });

 cuiFileUpload.$element.find("input[type=file]").remove();
 });
 }

 function showErrorAlert(message, title){
 var fui = $(window).adaptTo("foundation-ui"),
 options = [{
 text: "OK",
 warning: true
 }];

 message = message || "Unknown Error";
 title = title || "Error";

 fui.prompt(title, message, "error", options);
 }
}(jQuery, jQuery(document), Granite.author));