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



3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. 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
  3. I simply want to say I’m very new to blogs and actually loved you’re blog site. Almost certainly I’m going to bookmark your blog post . You absolutely come with great well written articles.
    Document Management Software Dubai
    Document Management Software
    Document Management Software UAE
    Best Document Management Software

    ReplyDelete