{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "file-manager-file-upload",
  "framework": "angular",
  "type": "registry:component",
  "component": "FileManager",
  "variant": "file-upload",
  "dependencies": [
    "@syncfusion/ej2-angular-filemanager"
  ],
  "description": "File manager sample demonstrating file uploads through the toolbar and upload dialog.",
  "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-file-upload.md"
  },
  "files": [
    {
      "target": "src/components/file-manager-file-upload/file-upload.component.ts",
      "content": "import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core';\nimport { UploaderComponent, UploaderModule } from '@syncfusion/ej2-angular-inputs';\nimport { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';\nimport { FileManagerComponent, FileOpenEventArgs, FileManagerModule } from '@syncfusion/ej2-angular-filemanager';\nimport { EmitType } from '@syncfusion/ej2-base';\nimport { ButtonModule } from '@syncfusion/ej2-angular-buttons';\n\n/**\n * File Manager real time use case sample\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'file-upload.html',\n    styleUrls: ['file-upload.css'],\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [UploaderModule, ButtonModule, DialogModule, FileManagerModule]\n})\n\nexport class FileUploadController {\n    @ViewChild('uploadObj')\n    public uploadObj!: UploaderComponent;\n    @ViewChild('dialogObj')\n    public dialogObj!: DialogComponent;\n    @ViewChild('filemanagerObj')\n    public filemanagerObj!: FileManagerComponent;\n    public dialogHeader = 'Select a file';\n    public animationSettings: Object = { effect: 'None' };\n    public showCloseIcon = true;\n    public target = '#target';\n    public visible = false;\n    public dialogWidth = '850px';\n    public ajaxSettings!: object;\n    public contextMenuSettings!: object;\n    public toolbarSettings!: object;\n    public hostUrl = 'https://physical-service.syncfusion.com/';\n\n    public btnClick: EmitType<object> = () => {\n        this.dialogObj.show();\n        this.dialogOpen();\n        this.filemanagerObj.path = '/';\n        this.filemanagerObj.selectedItems = [];\n        this.filemanagerObj.refresh();\n    }\n\n    // Uploader will be hidden, if Dialog is opened\n    public dialogOpen: EmitType<object> = () => {\n        document.getElementById('uploadFileManager')!.style.display = 'none';\n    }\n    // Uploader will be shown, if Dialog is closed\n    public dialogClose: EmitType<object> = () => {\n        document.getElementById('uploadFileManager')!.style.display = 'block';\n    }\n\n    // File Manager's fileOpen event function\n    public onFileOpen(args: FileOpenEventArgs): void {\n        let file = (args as any).fileDetails;\n        if (file.isFile) {\n            args.cancel = true;\n            if (file.size <= 0 ) { file.size = 10000; }\n            this.uploadObj.files = [{name: file.name, size: file.size, type: file.type }];\n            this.dialogObj.hide();\n        }\n    }\n\n    public ngOnInit(): void {\n        if (document.querySelector('.sb-demo-section')) {\n          document.querySelector('.sb-demo-section')!.classList.add('upload-dialog');\n        }\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 = {\n            items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']\n        };\n        this.contextMenuSettings = {\n            file: [ 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'],\n            visible: true\n        };\n    }\n\n    public ngOnDestroy(): void {\n        if (document.querySelector('.sb-demo-section') && document.querySelector('.sb-demo-section')!.classList.contains('upload-dialog')) {\n            document.querySelector('.sb-demo-section')!.classList.remove('upload-dialog');\n        }\n    }\n\n}\n"
    },
    {
      "target": "src/components/file-manager-file-upload/file-upload.css",
      "content": ".upload-dialog {\n    height: 550px !important;\n}\n.sample-container {\n    margin: 10px 10px 10px 10px;\n}\n\n.fileupload {\n    max-width: 500px;\n    margin: auto;\n}\n\n#openBtn {\n    position: absolute;\n    top: 18px;\n    left: 43%;\n}\n\n#dialog {\n    top: 20px !important;\n    max-height: 500px !important;\n}\n\n#uploadFileManager .e-file-drop, #uploadFileManager .e-css.e-btn {\n    display: none;\n}\n\n.tailwind #openBtn,\n.tailwind-dark #openBtn {\n    top: 18px;\n}\n\n.bootstrap #openBtn,\n.bootstrap-dark #openBtn {\n    top: 20px;\n}\n\n.bootstrap5 #openBtn,\n.bootstrap5-dark #openBtn {\n    top: 16px;\n}\n \n .ej2-new #openBtn {\n   top: 148px;\n }\n\n  @media (max-width: 768px) {\n    .ej2-new #openBtn {\n     top: 274px !important;\n     left: 35%;\n    }\n  }\n\n.fileupload .e-file-select-wrap {\n    padding: 20px 0 20px 20px;\n}\n"
    },
    {
      "target": "src/components/file-manager-file-upload/file-upload.html",
      "content": "<div class=\"sample-container\">\n    <div id='uploadFileManager' class=\"fileupload\">\n        <ejs-uploader #uploadObj id='defaultfileupload'></ejs-uploader>\n        <button ejs-button id='openBtn' (click)=\"btnClick()\">File Browser</button>\n    </div>\n    <div id='target' class=\"control-section\">\n        <ejs-dialog #dialogObj id='dialog' [visible]='visible' [header]='dialogHeader' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' (open)=\"dialogOpen()\" (close)=\"dialogClose()\" \n            [target]='target' [width]='dialogWidth'>\n            <ejs-filemanager #filemanagerObj id='filemanager' [ajaxSettings]='ajaxSettings' [toolbarSettings]='toolbarSettings' [contextMenuSettings]='contextMenuSettings' [allowMultiSelection]='false' (fileOpen)=\"onFileOpen($event)\">\n            </ejs-filemanager>\n        </ejs-dialog>\n    </div>\n</div>\n"
    }
  ]
}