AEM 62 - Touch UI Disable Upload of File in Granite Fileupload Widget

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));