AEM 61 - Touch UI Fill Dialog Fields with Default Values on Image Drop

Goal

Fill Touch UI Dialog Fields with default values, on image upload or drag and drop from Asset Finder. Title textfield (granite/ui/components/foundation/form/textfield) is filled with the name of image dropped and Creator textarea (granite/ui/components/foundation/form/textarea) with metadata /jcr:content/metadata/xmp:CreatorTool

Demo | Package Install

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-dialog-field-fill-default

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-dialog-field-fill-default/clientlib and set a property categories of String type to cq.authoring.dialog, dependencies of type String[] with value underscore

3) Create file ( type nt:file ) /apps/touchui-dialog-field-fill-default/clientlib/js.txt, add the following

                         default.js

4) Create file ( type nt:file ) /apps/touchui-dialog-field-fill-default/clientlib/default.js, add the following code

(function ($, $document) {
    var DIALOG_SELECTOR = ".cq-dialog",
        FILE_UPLOAD_SELECTOR = ".cq-dialog .coral-FileUpload",
        TITLE_NAME = "[name='./title']", // dialog field for file name autofill
        CREATOR_NAME = "[name='./creator']"; // dialog field for creator auto fill - image-path/jcr:content/metadata/xmp:CreatorTool

    $document.on("dialog-ready", function () {
        var $element = $document.find(FILE_UPLOAD_SELECTOR),
            widget = $element ? $element.data("fileUpload") : undefined;

        if (_.isEmpty(widget)) {
            return;
        }

        registerImageDrop(widget);
    });

    function registerImageDrop(widget){
        //when the image is drag n dropped from asset finder
        widget.$element.on("assetselected", handleImageDrop);

        //when the image is uploaded from local file system
        widget.$element.on("fileuploadsuccess", handleFileUpload);

        var $dialog = $document.find(DIALOG_SELECTOR);

        function handleFileUpload(event){
            $dialog.find(TITLE_NAME).val(event.item.file.name);
            $dialog.find(CREATOR_NAME).val("");
        }

        function handleImageDrop(event){
            var assetPath = event.path;

            if(_.isEmpty(assetPath)){
                return;
            }

            $.ajax(assetPath + ".3.json").done(function(data){
                $dialog.find(TITLE_NAME).val(getStringAfterLastSlash(assetPath));
                $dialog.find(CREATOR_NAME).val(data["jcr:content"]["metadata"]["xmp:CreatorTool"]);
            })
        }
    }

    function getStringAfterLastSlash(str){
        if(!str || (str.indexOf("/") == -1)){
            return "";
        }

        return str.substr(str.lastIndexOf("/") + 1);
    }
})(jQuery, jQuery(document));