How to enable asset drag-and-drop feature in the PathField
After the Adobe Experience Manager 6.5.10 update, it is now possible to drag-and-drop assets from the asset browser into a PathField on the page editor. To enable this feature, add the droppable property to the node of PathField.
Description 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 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/@dropable={Boolean}true
<?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>