# file-manager-access-control

> File manager applies role-based permissions to restrict files and available operations.

**Framework:** react  **Component:** FileManager  **Variant:** access-control

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/ts/file-manager-access-control.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-filemanager
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/file-manager-access-control/FileManager.tsx

```tsx
import { FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';

/**
 * File Manager API sample
 */
const Default = () => {

    let hostUrl: string = "https://physical-service.syncfusion.com/";
    
    return(
        <div>
            <div className="control-section">
                <FileManagerComponent id="api_filemanager"
                    ajaxSettings={{
                        downloadUrl: hostUrl + 'api/FileManagerAccess/Download',
                        getImageUrl: hostUrl + 'api/FileManagerAccess/GetImage',
                        uploadUrl: hostUrl + 'api/FileManagerAccess/Upload',
                        url: hostUrl + 'api/FileManagerAccess/FileOperations'
                    }}
                    toolbarSettings={{items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details']}}
                    uploadSettings={{ directoryUpload: true }}>
                    <Inject services={[NavigationPane, Toolbar]} />
                </FileManagerComponent>
            </div>
        </div>
    );
}
export default Default;
```