{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "file-manager-overview",
  "framework": "vue",
  "type": "registry:component",
  "component": "FileManager",
  "variant": "overview",
  "dependencies": [
    "@syncfusion/ej2-vue-filemanager"
  ],
  "description": "File manager overview combines toolbar, context menu, navigation, and details pane.",
  "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-overview.md"
  },
  "files": [
    {
      "target": "src/components/file-manager-overview/FileManager.vue",
      "content": "<template>\n<div>\n    <div class=\"control-section file-overview\">\n         <div class=\"sample-container\">\n            <ejs-filemanager id=\"overview_file\" :ajaxSettings='ajaxSettings' :view='view' :toolbarSettings='toolbarSettings' :contextMenuSettings=\"contextMenuSettings\">\n            </ejs-filemanager>\n        </div>\n    </div>\n</div>\n</template>\n<style>\n.file-overview .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 full functionalities sample\n */\n\nlet hostUrl = 'https://physical-service.syncfusion.com/';\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            view:\"Details\",\n            detailsViewSettings: {\n                columns: [\n                    {\n                        field: 'name', headerText: 'Name', customAttributes: { class: 'e-fe-grid-name' }\n                    },\n                    {\n                        field: '_fm_modified', headerText: 'DateModified', format: 'MM/dd/yyyy hh:mm a'\n                    },\n                    {\n                        field: 'size', headerText: 'Size', template: '<span class=\"e-fe-size\">${size}</span>', format: 'n2'\n                    }\n                ]\n            }\n        };\n    },\n    provide: {\n            filemanager: [NavigationPane, DetailsView, Toolbar]\n    }\n}\n</script>\n\n"
    },
    {
      "target": "src/components/file-manager-overview/FileManagerView.vue",
      "content": "<template>\n  <FileManager />\n</template>\n\n<script setup>\nimport FileManager from '../../components/FileManager.vue';\n</script>"
    }
  ]
}