{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "file-manager-drag-and-drop",
  "framework": "vue",
  "type": "registry:component",
  "component": "FileManager",
  "variant": "drag-and-drop",
  "dependencies": [
    "@syncfusion/ej2-vue-filemanager"
  ],
  "description": "File manager with drag-and-drop moves, context menu, and details view enabled.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/file-manager-drag-and-drop.md"
  },
  "files": [
    {
      "target": "src/components/file-manager-drag-and-drop/FileManager.vue",
      "content": "<template>\n<div>\n    <div class=\"control-section file-drag\">\n         <div class=\"sample-container\">\n            <ejs-filemanager id=\"filemanager\" :ajaxSettings='ajaxSettings' :allowDragAndDrop='allowDragAndDrop' :toolbarSettings='toolbarSettings' :contextMenuSettings=\"contextMenuSettings\">\n            </ejs-filemanager>\n        </div>\n    </div>\n</div>\n</template>\n<style>\n.file-drag .sample-container {\n    margin: 10px 10px 10px 10px;\n}\n</style>\n<script>\nimport { FileManagerComponent, NavigationPane, Toolbar, DetailsView } from \"@syncfusion/ej2-vue-filemanager\";\n\n/**\n * File Manager Drag and Drop feature sample\n */\nlet hostUrl = 'https://physical-service.syncfusion.com/';\n\nexport default {\n     components: {\n      'ejs-filemanager': FileManagerComponent\n     },\n     data: function() {\n        return {            \n           ajaxSettings:\n            {\n                url: hostUrl + 'api/FileManager/FileOperations',\n                getImageUrl: hostUrl + 'api/FileManager/GetImage',\n                uploadUrl: hostUrl + 'api/FileManager/Upload',\n                downloadUrl: hostUrl + 'api/FileManager/Download'\n            },\n            toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details']},\n            contextMenuSettings: {\n                file: [\"Cut\", \"Copy\", \"|\", \"Delete\", \"Download\", \"Rename\", \"|\", \"Details\"],\n                layout: [\"SortBy\", \"View\", \"Refresh\", \"|\", \"Paste\",  \"|\", \"NewFolder\", \"|\", \"Details\", \"|\", \"SelectAll\"],\n                visible: true\n            },\n            allowDragAndDrop: true\n        };\n    },\n    provide: {\n            filemanager: [NavigationPane, DetailsView, Toolbar]\n    }\n}\n</script>\n\n"
    },
    {
      "target": "src/components/file-manager-drag-and-drop/FileManagerView.vue",
      "content": "<template>\n  <FileManager />\n</template>\n\n<script setup>\nimport FileManager from '../../components/FileManager.vue';\n</script>"
    }
  ]
}