{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "file-manager-overview",
  "framework": "angular",
  "type": "registry:component",
  "component": "FileManager",
  "variant": "overview",
  "dependencies": [
    "@syncfusion/ej2-angular-filemanager"
  ],
  "description": "File manager overview sample for browsing, searching, and organizing remote files.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/file-manager-overview.md"
  },
  "files": [
    {
      "target": "src/components/file-manager-overview/overview.component.ts",
      "content": "import { Component, ViewEncapsulation } from '@angular/core';\nimport { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService, FileManagerModule } from '@syncfusion/ej2-angular-filemanager';\n/**\n * File Manager full functionalities sample\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'overview.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [NavigationPaneService, ToolbarService, DetailsViewService],\n    standalone: true,\n    imports: [FileManagerModule]\n})\n\nexport class OverViewController {\n    public ajaxSettings: Record<string, any> = {};\n    public toolbarSettings: Record<string, any> = {};\n    public contextMenuSettings: Record<string, any> = {};\n    public detailsViewSettings: Record<string, any> = {};\n    public view = 'Details';\n    public hostUrl: string = 'https://physical-service.syncfusion.com/';\n    public ngOnInit(): void {\n        this.ajaxSettings = {\n            url: this.hostUrl + 'api/FileManager/FileOperations',\n            getImageUrl: this.hostUrl + 'api/FileManager/GetImage',\n            uploadUrl: this.hostUrl + 'api/FileManager/Upload',\n            downloadUrl: this.hostUrl + 'api/FileManager/Download'\n        };\n        this.toolbarSettings = { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details',] };\n        this.contextMenuSettings = {\n            file: [ 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'],\n            layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll'],\n            visible: true\n        }\n       this.view = \"Details\";\n       this.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}"
    },
    {
      "target": "src/components/file-manager-overview/overview.html",
      "content": "<div class=\"sample-container\">\n       <ejs-filemanager id='overview' [ajaxSettings]='ajaxSettings'  [toolbarSettings]=\"toolbarSettings\" [contextMenuSettings]=\"contextMenuSettings\" [view]='view'>\n        </ejs-filemanager>\n</div>\n"
    }
  ]
}