AEM 61 - TouchUI Disable Drag and Drop from Desktop to Assets Console

Goal

Disable upload of assets using Drag and Drop from Desktop to Assets Console - http://localhost:4502/assets.html/content/dam

For ClassicUI check this post

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-assets-disable-desktop-drop

2) Create node /apps/touchui-assets-disable-desktop-drop/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.gui.damadmin.admin

3) Create file (nt:file) /apps/touchui-assets-disable-desktop-drop/clientlib/js.txt and add

                       disable-drop.js

4) Create file (nt:file) /apps/touchui-assets-disable-desktop-drop/clientlib/disable-drop.js and add the following code.

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

    $document.on("foundation-contentloaded", function () {
        $document.off("dropzonedragover", "span.coral-FileUpload");
        $document.on("dropzonedragover", "span.coral-FileUpload", showDisabledMessage);

        //triggered by coral when dropped files are added in queue and ready to process
        $document.off("filelistprocessed", "span.coral-FileUpload")
                        .on("filelistprocessed", "span.coral-FileUpload", clearAndRefresh);
    });

    function clearAndRefresh(event){
        var fileUpload = event.fileUpload;

        if(fileUpload && (fileUpload.isDragOver === true)){
            fileUpload.uploadQueue.splice(0, fileUpload.uploadQueue.length);
            $(".foundation-content").adaptTo("foundation-content").refresh();
        }
    }

    function showDisabledMessage() {
        var message = $('<div class=\"drag-drop-message\"><h1>'
                            + '<span>{</span>Drop from desktop disabled<span>}</span>' +
                        '</h1></div>');
        $('.foundation-collection-container').overlayMask('show', message);
    }
})(jQuery, $(document));