How to enable asset drag-and-drop feature in the PathField

Drag-and-drop of assets from the asset browser into a PathField on the page editor is possible after the AEM 6.5.10 update. To enable the feature, Add the droppable property to the node of PathField.

Description

Environment

Adobe Experience Manager

Issue/Symptoms

From AEM 6.5.10 onwards, you can drag and drop an asset from the asset browser into a PathField on the page editor. This feature corresponds to the below line in AEM 6.5.10 release notes:

“PathField in Sites editor allows authors to drag assets from Content Finder.”

This article explains how to enable this feature.

Resolution

Add the “droppable” property to the node of PathField.

name: droppable

  type: Boolean

  value: true

Customization Example:

A PathField with droppable=true, added to the HelloWorld component of the WKND tutorial, as

/apps/wknd/components/helloworld/cq:dialog/content/items/column/items/path:

<?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/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"
        jcr:title="Properties"
        sling:resourceType="cq/gui/components/authoring/dialog">
        <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
            <items jcr:primaryType="nt:unstructured">
                <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <text
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldLabel="Text"
                            name="./text"/>
                        <path
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                            fieldLabel="Path"
                            droppable="{Boolean}true"
                            name="./path"/>
                    </items>
                </column>
            </items>
        </content>
    </jcr:root>