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

10 comments:

  1. Thanks for the article! One question, where can I find all the events available for listening? (like assetselected and fileuploadsuccess)

    ReplyDelete
    Replies
    1. Not fully documented yet i guess, but you can find some of them here...

      http://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/index.html

      http://docs.adobe.com/docs/en/cq/5-6-1/touch-ui/coral-ui/...

      the "fileuploadsuccess" is triggered from coral api - http://localhost:4502/crx/de/index.jsp#/etc/clientlibs/granite/coralui2/js/coral.js

      Delete
  2. Hi Sreekanth,
    Is there any way to drag and drop 2 ,3 images in a touch ui dialog and need resource for touch ui image multifield also.

    ReplyDelete
    Replies
    1. satya, some additional code should be added to image multifield to get it working

      Delete
    2. I hope those changes are in js right?Can you share me that code.I need help for image drag and drop also not multifiled (ex : drag and drop 2 images only) in touch ui.

      Delete
  3. Hi Sreekanth,

    I have been having issues binding evnts to "dialog-ready" because if your on a mobile breakpoint and open a dialog it loads in a new page, not in a true dialog, and this event never fires. Have you seen this or know an event to bind to whenever a dialog opens, not just in 'modal' form.

    ReplyDelete
  4. On Image upload i want width and height of image to be prefilled as default value.How do i do it?

    ReplyDelete
  5. Hi Sreekanth,
    On drag and drop of an image into the component, I need to auto-populate the "Title" and "Copyright Owner" values from DAM into my component (i will have two different text fields in my component). I'm using AEM 6.1 and Classic UI.

    How this can be achieved ?

    ReplyDelete
  6. Hi Sreekanth,
    How can I proceed with this functionality in Sightly?

    ReplyDelete