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

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi Sreekanth,

    We can also specify a property to disable it in 6.2 for
    sling:resourceType="/libs/granite/ui/components/foundation/form/fileupload"

    allowUpload="{Boolean}false"

    Thanks.

    ReplyDelete
    Replies
    1. Dude, thanks a ton! This is what I was looking for, instead of writing custom JS validations.

      Delete