Drag and Drop Formats

Dragging and dropping in MediaCentral Cloud UX uses the native HTML Drag and Drop API. This documentation describes the data format provided by a drag event set to event.dataTransfer.

Overview

DataTransfer is a plain javascript object where keys are mimetypes. All mimetypes are optional and depend on your current context.

There are some predefined mimetypes (text/x.avid.location-item-list, text/x.avid.asset-list and text/x.avid.asset-list+json), which are closely connected to CTC.

The DataTransfer object is extendable. You can add your own mimetypes if needed.

Note: All AVID-specific mimetypes start with ‘x.avid.‘. Use different ones for internal usage.

To get any of these fields, use the method dataTransfer.getData.

Example

e.dataTransfer.getData('text/x.avid.asset-list');

Getting Items from Browse and Search

When getting an asset from the Browse App, the DataTransfer object will contain the following:

• text/plain
• text/x.avid.location-item-list
• text/x.avid.asset-list
• text/x.avid.asset-list+json

When getting a folder from the Browse App, the DataTransfer object will contain the following:

• text/plain
• text/x.avid.location-item-list

When getting an asset from the Search App, the DataTransfer object will contain the following:

• text/plain
• text/x.avid.asset-list
• text/x.avid.asset-list+json

Asset globalID

The asset globalID is a string, which contains the asset’s system type, system ID, asset type, and asset ID separated by ‘:‘.

Example

const asset1 = { 
    systemType: 'interplay-pam',
    systemID: '7B7E2886-81CC-4D66-B4F8-7C8431DA4176',
    type: 'masterclip',			
    id: '060a2b340101010101010f0013-000000-5c6ecfb3239b0023-060e2b347f7f-2a80', 
};     

globalID -> "interplay-pam:7B7E2886-81CC-4D66-B4F8-7C8431DA4176:masterclip:060a2b340101010101010f0013-000000-5c6ecfb3239b0023-060e2b347f7f-2a80"  

text/plain

Contains the folder/asset name.

Example

 "text/plain": "testclip001" 

If several items are dragged at the same time, text/plain will contain the names of all assets, separated by ‘\n‘

Example

 "text/plain": "testclip001\ntestclip002" 

text/x.avid.asset-list

Contains the asset’s globalID.

If several items are dragged at the same time, text/x.avid.asset-list will contain the globalIDs of all assets, separated by ‘\n‘

Example

For two assets:

 const asset1 = { 
     systemType: 'interplay-pam',
     systemID: '7B7E2886-81CC-4D66-B4F8-7C8431DA4176',
     type: 'masterclip',
     id: '060a2b340101010101010f0013-000000-5c6ecfb3239b0023-060e2b347f7f-2a80',
 };     

const asset2 = {  
     systemType: 'interplay-pam',
     systemID: '7B7E2886-81CC-4D66-B4F8-7C8431DA4176',
     type: 'masterclip',
     id: '060a2b340101010101010f0013-000000-8f154fa8e7e40080-4b0cf2fbe346-7cc2',
 }      

"text/x.avid.asset-list" -> "interplay-pam:7B7E2886-81CC-4D66-B4F8-7C8431DA4176:masterclip:060a2b340101010101010f0013-000000-5c6ecfb3239b0023-060e2b347f7f-2a80\n
interplay-pam:7B7E2886-81CC-4D66-B4F8-7C8431DA4176:masterclip:060a2b340101010101010f0013-000000-8f154fa8e7e40080-4b0cf2fbe346-7cc2",  

text/x.avid.asset-list+json

Contains an array with the data of the dragged asset in JSON format.

Example

const asset1 = { 
     systemType: 'interplay-pam', 
     systemID: '7B7E2886-81CC-4D66-B4F8-7C8431DA4176', 
     type: 'masterclip',
     id: '060a2b340101010101010f0013-000000-5c6ecfb3239b0023-060e2b347f7f-2a80',
   };  
   
 'text/x.avid.asset-list+json' -> '[{"systemType":"interplay-pam","systemID":"7B7E2886-81CC-4D66-B4F8-7C8431DA4176","type":"masterclip","id":"060a2b340101010101010f0013-000000-5c6ecfb3239b0023-060e2b347f7f-2a80"}]"  

text/x.avid.location-item-list

Contains the path.

Path is a string, which contains the item’s system type, system ID, and the path in the system.

Example for asset

For an asset located in the folder /Catalogs/test/ in an interplay-pam system with the id 7B7E2886-81CC-4D66-B4F8-7C8431DA4176, the path would look like the following:

 const testAsset = { 
    sytemType: 'interplay-pam', 
    systemID: '7B7E2886-81CC-4D66-B4F8-7C8431DA4176', 
    id: '060a2b340101010101010f0013-000000-e07b716c75e40080-5423f2fbe346-7cc2', 
 }
      
"text/x.avid.location-item-list" -> "interplay-pam:7B7E2886-81CC-4D66-B4F8-7C8431DA4176:folder-item:/Catalogs/test/060a2b340101010101010f0013-000000-e07b716c75e40080-5423f2fbe346-7cc2",  

Note: The asset’s path is introduced by the keyword ‘folder-item’ and always contains the asset ID.

Example for folder

For a folder “My sequences” located in the folder /Catalogs/test/ in an interplay-pam system with the id 7B7E2886-81CC-4D66-B4F8-7C8431DA4176, the path would look like the following:

"text/x.avid.location-item-list" -> "interplay-pam:7B7E2886-81CC-4D66-B4F8-7C8431DA4176:folder:/Catalogs/test/My sequences/"       

Note: The folder’s path is introduced by the keyword ‘folder’.

If several items are dragged, their paths will be separated by ‘\n‘.

Example for dragging folder and asset

// folder is located in /Catalogs/test/
const folder = {
    systemType: 'interplay-pam',
    systemID: '7B7E2886-81CC-4D66-B4F8-7C8431DA4176',
    name: 'My saved sequences',
}'

// asset in located in /Catalogs/test/
const asset = {
    systemType: 'interplay-pam',
    systemID: '7B7E2886-81CC-4D66-B4F8-7C8431DA4176',
    id: '060a2b340101010101010f0013-000000-e07b716c75e40080-5423f2fbe346-7cc2',
};

"text/x.avid.location-item-list" -> "interplay-pam:7B7E2886-81CC-4D66-B4F8-7C8431DA4176:folder:/Catalogs/test/My saved sequences/\n
interplay-pam:7B7E2886-81CC-4D66-B4F8-7C8431DA4176:folder-item:/Catalogs/test/060a2b340101010101010f0013-000000-e07b716c75e40080-5423f2fbe346-7cc2"