AEM 61 - Touch UI Assets Console Add Title (dc:title) on File Upload

Goal

Register a fileuploadsuccess listener in Touch UI Assets console to add dc:title metadata with filename - user, after successfully uploading a file (Drag & Drop or Upload button)

Demo | Package Install

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-asset-drop-listener

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-asset-drop-listener/clientlib and set a property categories of String type to cq.gui.damadmin.admin

3) Create file ( type nt:file ) /apps/touchui-asset-drop-listener/clientlib/js.txt, add the following

                         add-file-name.js

4) Create file ( type nt:file ) /apps/touchui-asset-drop-listener/clientlib/add-file-name.js, add the following code

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

    $(document).on("fileuploadsuccess", "span.coral-FileUpload", addTitle);

    function addTitle(event){
        try{
            var options = event.fileUpload.options,
                folderPath = options.uploadUrl.replace(".createasset.html", ""),
                assetMetadataPath = folderPath + "/" + event.item.fileName + "/jcr:content/metadata";

            var data = {
"dc:title" : event.item.fileName + " - " + getCurrentUser()
            };

            $.ajax({
                type : 'POST',
                url : assetMetadataPath,
                data  : data
            }).done(function(){
                showAlert(true, data["dc:title"]);
            })
        }catch(err){
            showAlert(false, err.message);
        }
    }

    function showAlert(isSuccessful, data){
        var fui = $(window).adaptTo("foundation-ui"), message, options;

        if(isSuccessful){
            message = "Title added - '" + data + "'";

            options = [{
                text: "Refresh",
                primary: true,
                handler: function() {
                    location.reload();
                }
            }]
        }else{
            message = "Error - " + data;

            options = [{
                text: "OK",
                warning: true
            }]
        }

        fui.prompt("Asset Title", message, "notice", options);
    }

    function getCurrentUser(){
        //is there a better way like classic UI? - CQ.User.getCurrentUser()
        return $(".endor-Account-caption").html();
    }
})(jQuery, $(document));