{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "file-manager-file-upload",
  "framework": "react",
  "type": "registry:component",
  "component": "FileManager",
  "variant": "file-upload",
  "dependencies": [
    "@syncfusion/ej2-react-filemanager",
    "@syncfusion/ej2-react-inputs",
    "@syncfusion/ej2-react-popups",
    "@syncfusion/ej2-react-buttons"
  ],
  "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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/file-manager-file-upload.md"
  },
  "files": [
    {
      "target": "src/components/file-manager-file-upload/FileManager.jsx",
      "content": "import { useRef, useState } from 'react';\nimport { UploaderComponent } from '@syncfusion/ej2-react-inputs';\nimport { DialogComponent } from '@syncfusion/ej2-react-popups';\nimport { ButtonComponent } from '@syncfusion/ej2-react-buttons';\nimport { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';\n/**\n * File Manager real time use case sample\n */\nconst SAMPLE_CSS = `\n.fileupload {\n    max-width: 500px;\n    margin: auto;\n}\n#openBtn {\n    position: absolute;\n    top: 28px;\n    left: 43%;\n}\n#target {\n    height: 550px;\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: 28px;\n}\n\n.bootstrap #openBtn,\n.bootstrap-dark #openBtn {\n    top: 30px;\n}\n\n.bootstrap5 #openBtn,\n.bootstrap5-dark #openBtn {\n    top: 26px;\n}\n\n#uploadFileManager .e-upload .e-file-select-wrap{\n    display: block;\n}\n\n.ej2-new #openBtn {\n    top: 171px;\n}\n\n@media (max-width: 768px) {\n    .ej2-new #openBtn {\n        top: 300px !important;\n        left: 35%;\n    }\n}\n\n.fileupload .e-file-select-wrap {\n    padding: 20px 0 20px 20px;\n} `;\n\nconst FileUpload = () => {\n    const [display, setDisplay] = useState('block');\n    const [file, setFile] = useState([{\n            name: \"\",\n            size: null,\n            type: \"\"\n        }]);\n    const [path, setPath] = useState('/');\n    const [selectedItem, setSelectedItem] = useState([]);\n    let fileUploadObj = useRef(null);\n    let dialogObj = useRef(null);\n    let filemanagerObj = useRef(null);\n    let animationSettings = { effect: 'None' };\n    // 'Uploader' will be shown, if Dialog is closed\n    const dialogClose = () => {\n        setDisplay('block');\n    };\n    // 'Uploader' will be hidden, if Dialog is opened\n    const dialogOpen = () => {\n        setDisplay('none');\n    };\n    // File Manager's fileOpen event function\n    const onFileOpen = (args) => {\n        let file = args.fileDetails;\n        if (file.isFile) {\n            args.cancel = true;\n            if (file.size <= 0) {\n                file.size = 10000;\n            }\n            setFile([{ name: file.name, size: file.size, type: file.type }]);\n            dialogObj.current.hide();\n        }\n    };\n    const btnClick = () => {\n        dialogObj.current.show();\n        dialogOpen();\n        setPath('/');\n        setSelectedItem([]);\n        filemanagerObj.current.refresh();\n    };\n    let hostUrl = \"https://physical-service.syncfusion.com/\";\n    return (<div>\n            <div className=\"control-section\">\n                <style>{SAMPLE_CSS}</style>\n                <div id='uploadFileManager' className=\"fileupload\" style={{ display: display }}>\n                    <UploaderComponent id='fileUpload' type='file' ref={fileUploadObj} files={file}></UploaderComponent>\n                    <ButtonComponent id=\"openBtn\" onClick={btnClick.bind(this)}>File Browser</ButtonComponent>\n                </div>\n                <div id='target' className=\"control-section\">\n                    <DialogComponent width='850px' id='dialog' target={'#target'} ref={dialogObj} header=\"Select a file\" showCloseIcon={true} visible={false} open={dialogOpen.bind(this)} close={dialogClose.bind(this)} animationSettings={animationSettings}>\n                        <FileManagerComponent id=\"filemanager\" ref={filemanagerObj} path={path} selectedItems={selectedItem} ajaxSettings={{ url: hostUrl + \"api/FileManager/FileOperations\", getImageUrl: hostUrl + \"api/FileManager/GetImage\", uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download' }} allowMultiSelection={false} toolbarSettings={{ items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }} contextMenuSettings={{ file: ['Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll'], visible: true }} fileOpen={onFileOpen.bind(this)}>\n                            <Inject services={[NavigationPane, DetailsView, Toolbar]}/>\n                        </FileManagerComponent>\n                    </DialogComponent>\n                </div>\n            </div>\n        </div>);\n};\nexport default FileUpload;"
    }
  ]
}