AEM 62 - Touch UI Assets Console add Metadata while Uploading Files

Goal

Show simple Metadata Form in the Upload Dialog of Touch UI Assets Console; With this extension users can add metadata while uploading files

Demo | Package Install


Metadata Schema

Add a new tab to Image metadata schema form (how-to documentation) for showing the metadata entered while uploading Image assets



Metadata Form in Upload Dialog



Metadata Display



Metadata in CRX

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-assets-file-upload-with-metadata

2) Metadata form shown in Upload Dialog is Authoring Dialog; Create the dialog /apps/eaem-assets-file-upload-with-metadata/dialog, add metadata form nodes




      Dialog XML

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container">
<layout
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
        margin="{Boolean}false"/>
<items jcr:primaryType="nt:unstructured">
<column
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                    fieldLabel="Title"
                    name="./eaemTitle"/>
<alt
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                    fieldDescription="(leave empty to use the title defined above)"
                    fieldLabel="Alt Text"
                    name="./eaemAltText"/>
</items>
</column>
</items>
</jcr:root>

3) Create node /apps/eaem-assets-file-upload-with-metadata/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value dam.gui.coral.fileupload, cq.authoring.dialog String[] property dependencies with value underscore

4) Create file (nt:file) /apps/eaem-assets-file-upload-with-metadata/clientlib/js.txt, add

            fileupload-with-metadata.js

5) Create file (nt:file) /apps/eaem-assets-file-upload-with-metadata/clientlib/fileupload-with-metadata.js, add the following code

(function($, $document) {
    var METADATA_DIALOG = "/apps/eaem-assets-file-upload-with-metadata/dialog.html",
        METADATA_PREFIX = "eaem",
        url = document.location.pathname,
        metadataDialogAdded = false;

    if( url.indexOf("/assets.html") == 0 ){
        handleAssetsConsole();
    }else if(url.indexOf(METADATA_DIALOG) == 0){
        handleMetadataDialog();
    }

    function handleAssetsConsole(){
        $document.on("foundation-contentloaded", handleFileAdditions);
    }

    function handleMetadataDialog(){
        $document.on("foundation-contentloaded", styleMetadataIframe);
    }

    function registerReceiveDataListener(handler) {
        if (window.addEventListener) {
            window.addEventListener("message", handler, false);
        } else if (window.attachEvent) {
            window.attachEvent("onmessage", handler);
        }
    }

    function styleMetadataIframe(){
        $(".cq-dialog-actions").remove();
        registerReceiveDataListener(sendMetadata);
    }

    function sendMetadata(event){
        var message = JSON.parse(event.data);

        var $dialog = $(".cq-dialog"),
            $fields = $dialog.find("[name^='./']"),
            data = {}, $field, name, value;

        $fields.each(function(index, field){
            $field = $(field);
            name = $field.attr("name");
            value = $field.val();

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

            name = name.substr(2);

            if(!name.indexOf(METADATA_PREFIX) === 0){
                return
            }

            data[name] = value;
        });

        $.ajax({
            type : 'POST',
            url : message.path,
            data  : data
        })
    }

    function handleFileAdditions(){
        var $fileUpload = $("coral-chunkfileupload"),
            $metadataIFrame;

        $fileUpload.on('coral-fileupload:fileadded', addMetadataDialog);

        $fileUpload.on('coral-fileupload:loadend', postMetadata);

        function sendDataMessage(message){
            $metadataIFrame[0].contentWindow.postMessage(JSON.stringify(message), "*");
        }

        function addMetadataDialog(){
            if(metadataDialogAdded){
                return;
            }

            metadataDialogAdded = true;

            _.debounce(addDialog, 500)();
        }

        function addDialog(){
            var $dialog = $("coral-dialog-header:contains('Upload')").closest("coral-dialog"),
                iFrame = '<iframe width="550px" height="250px" src="' + METADATA_DIALOG + '"/>',
                $dialogContent = $dialog.find("coral-dialog-content");

            $metadataIFrame = $(iFrame).appendTo($dialogContent.css("max-height", "500px"));
            $dialogContent.find("input").css("width", "28rem");
            $dialogContent.closest(".coral-Dialog-wrapper").css("top", "40%").css("left", "40%");
        }

        function postMetadata(event){
            var detail = event.originalEvent.detail,
                folderPath = detail.action.replace(".createasset.html", ""),
                assetMetadataPath = folderPath + "/" + detail.item._file.name + "/jcr:content/metadata";

            var data = {
                path: assetMetadataPath
            };

            sendDataMessage(data);
        }
    }
})(jQuery, jQuery(document));