AEM 6420 - Touch UI Validate Asset file names on Upload

Goal


Validate asset file names when they are uploaded to Assets Touch UI

For similar validation of sites page name check this post

Demo | Package Install | Github




Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-assets-file-name-validation

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-assets-file-name-validation/clientlib and set property categories of String[] type to dam.gui.coral.fileupload and dependencies String[] to lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-assets-file-name-validation/clientlib/js.txt, add the following

  file-name-validate.js

4) Create file (type nt:file) /apps/eaem-touchui-assets-file-name-validation/clientlib/file-name-validate.js, add the following code

(function ($, $document) {
    "use strict";

    var _ = window._,
        PATTERN = /^[a-z0-9_\-.]+$/,
        ERROR_MSG = "Acceptable characters in file name are lowercase alphabets, numbers, underscore and hyphen <b>" + PATTERN + "</b>",
        UPLOAD_DIALOG_CLASS = ".uploadListDialog",
        registered = false;
    
    $document.on("foundation-contentloaded", handleFileNames);

    function handleFileNames() {
        if(registered){
            return;
        }

        registered = true;

        var $fileUpload = $("coral-chunkfileupload");

        $fileUpload.on('change', checkFileNames);
    }

    function checkFileNames(event) {
        var $uploadDialog = $(UPLOAD_DIALOG_CLASS);

        if(_.isEmpty($uploadDialog)){
            return;
        }

        var fileUpload = this;

        $uploadDialog.each(function(index, uploadDialog){
            if(!uploadDialog.open){
                return;
            }

            if(_.isEmpty(getInvalidFileNames(fileUpload))){
                return;
            }

            uploadDialog.hide();

            showAlert(ERROR_MSG);
        });
    }

    function getInvalidFileNames(fileUpload){
        var invalidFileNames = [];

        if(!fileUpload || _.isEmpty(fileUpload.uploadQueue)){
            return invalidFileNames;
        }

        _.each(fileUpload.uploadQueue, function(file){
            if(!PATTERN.test(file.name)){
                invalidFileNames.push(file.name)
            }
        });

        return invalidFileNames;
    }

    function showAlert(message, title, callback){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                id: "ok",
                text: "OK",
                primary: true
            }];

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

        fui.prompt(title, message, "warning", options, callback);
    }
}(jQuery, jQuery(document)));



1 comment:

  1. I am trying same thing but its not validating.
    I have similar kind of reuirement i have to validate the file name and reduce size of file name if length is greater than 60.
    Could you please guide me to achieve this.
    Thank you

    ReplyDelete