{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "file-manager-file-upload",
  "framework": "vue",
  "type": "registry:component",
  "component": "FileManager",
  "variant": "file-upload",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-filemanager",
    "@syncfusion/ej2-vue-inputs",
    "@syncfusion/ej2-vue-popups"
  ],
  "description": "File manager launched from an uploader dialog to pick files for a form submit.",
  "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-file-upload.md"
  },
  "files": [
    {
      "target": "src/components/file-manager-file-upload/FileManager.vue",
      "content": "<template>\n<div>\n    <div class=\"control-section file-upload\">\n        <div id='uploadFileManager' class=\"fileupload\">\n            <ejs-uploader ref=\"uploadObj\" id='defaultfileupload' name=\"UploadFiles\">\n            </ejs-uploader>\n            <ejs-button id=\"openBtn\" v-on:click=\"btnClick\">File Browser</ejs-button>\n        </div>\n        <div id='target' class=\"control-section\">\n            <ejs-dialog ref=\"uploadDialog\" id=\"dialog\" v-bind:visible=\"false\" :header='dialogHeader' :animationSettings='animationSettings' :showCloseIcon='showCloseIcon' :open=\"dialogOpen\" :close=\"dialogClose\" :target='target'\n            :width='dialogWidth'>\n            <div>\n                <ejs-filemanager id=\"filemanager\" :ajaxSettings='ajaxSettings' :contextMenuSettings=\"contextMenuSettings\" :toolbarSettings=\"toolbarSettings\" v-bind:allowMultiSelection=\"false\" :fileOpen=\"onFileOpen\" >\n                </ejs-filemanager>\n            </div>\n            </ejs-dialog>\n        </div>\n    </div>\n</div>\n</template>\n\n<style>\n\n    .file-upload .fileupload {\n        max-width: 500px;\n        margin: auto;\n    }\n    .file-upload #openBtn {\n        position: absolute;\n        top: 28px;\n        left: 43%;\n    }\n    .file-upload #target {\n        height: 550px;\n    }\n    .file-upload #dialog {\n        top: 20px !important;\n        max-height: 500px !important;\n        left: 30px !important;\n    }\n\n    .file-upload #uploadFileManager .e-file-drop, .file-upload #uploadFileManager .e-css.e-btn {\n        display: none;\n    }\n    \n    .tailwind #openBtn,\n    .tailwind-dark #openBtn {\n\t\ttop: 28px;\n\t}\n\t\n\t.bootstrap5 #openBtn,\n    .bootstrap5-dark #openBtn {\n        top: 26px;\n    }\n\n    .bootstrap #openBtn,\n    .bootstrap-dark #openBtn {\n        top: 30px;\n    }\n\n    .fileupload .e-file-select-wrap {\n        padding: 20px 0 20px 20px;\n    }\n</style>\n\n<script>\n    import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';\n    import { ButtonComponent } from \"@syncfusion/ej2-vue-buttons\";\n    import { DialogComponent } from '@syncfusion/ej2-vue-popups';\n    import { FileManagerComponent, NavigationPane, Toolbar, DetailsView } from \"@syncfusion/ej2-vue-filemanager\";\n    /**\n    * File Manager real time use case sample\n     */\n    let hostUrl = 'https://physical-service.syncfusion.com/';\n\n    export default {\n        components: {\n            'ejs-filemanager': FileManagerComponent,\n            'ejs-uploader': UploaderComponent,\n            'ejs-button': ButtonComponent,\n            'ejs-dialog': DialogComponent\n        },\n        data: function(){\n            return {\n                dialogHeader: 'Select a file',\n                showCloseIcon: true,\n                target: '#target',\n                animationSettings: { effect: 'None' },\n                dialogWidth: '850px',\n                ajaxSettings:  {\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\", \"Upload\", 'Cut', 'Copy', \"Delete\", \"Rename\", \"SortBy\", \"Refresh\", \"Selection\", \"View\", \"Details\"]},\n                contextMenuSettings: {\n                    file: [\"Cut\", \"Copy\", \"|\", \"Delete\", \"Download\", \"Rename\", \"|\", \"Details\"],\n                    visible: true\n                },\n            }\n        },\n        provide: {\n                filemanager: [NavigationPane, DetailsView, Toolbar]\n        },\n        methods:{\n            btnClick: function(event) {\n                this.$refs.uploadDialog.show();\n                let fileObj = document.getElementById('filemanager').ej2_instances[0];\n                fileObj.path = \"/\";\n                fileObj.selectedItems = [];\n                fileObj.refresh();\n            },\n            // Uploader will be hidden, if Dialog is opened\n            dialogOpen: function() {\n                document.getElementById('uploadFileManager').style.display = 'none';\n            },\n            // Uploader will be shown, if Dialog is closed\n            dialogClose: function() {\n                document.getElementById('uploadFileManager').style.display = 'block';\n            },\n            // File Manager's fileOpen event function\n            onFileOpen: function(args) {\n                let file = args.fileDetails;\n                if (file.isFile) {\n                    args.cancel = true;\n                    this.$refs.uploadObj.ej2Instances.files = [{name: file.name, size: file.size, type: file.type }];\n                    this.$refs.uploadDialog.hide();\n                }\n            }\n        }\n    };\n</script>\n"
    },
    {
      "target": "src/components/file-manager-file-upload/FileManagerView.vue",
      "content": "<template>\n  <FileManager />\n</template>\n\n<script setup>\nimport FileManager from '../../components/FileManager.vue';\n</script>"
    }
  ]
}