# file-manager-access-control

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

**Framework:** vue  **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/vue/file-manager-access-control.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-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.vue

```vue
<template>
<div>
    <div class="control-section file-overview">
         <div class="sample-container">
            <ejs-filemanager id="overview_file" :ajaxSettings='ajaxSettings' :toolbarSettings="toolbarSettings" :contextMenuSettings="contextMenuSettings">
            </ejs-filemanager>
        </div>
    </div>
</div>
</template>
<style>
.file-overview .sample-container {
    margin: 10px 10px 10px 10px;
}
</style>
<script>
import { FileManagerComponent, NavigationPane, Toolbar, DetailsView } from "@syncfusion/ej2-vue-filemanager";

/**
 * File Manager full functionalities sample
 */

let hostUrl = 'https://physical-service.syncfusion.com/';
export default {
     components: {
      'ejs-filemanager': FileManagerComponent
     },
     data: function() {
        return {            
           ajaxSettings:
            {
                url: hostUrl + 'api/FileManagerAccess/FileOperations',
                getImageUrl: hostUrl + 'api/FileManagerAccess/GetImage',
                uploadUrl: hostUrl + 'api/FileManagerAccess/Upload',
                downloadUrl: hostUrl + 'api/FileManagerAccess/Download'
            },
            toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details']},
            uploadSettings: { directoryUpload: true }
        };
    },
    provide: {
            filemanager: [NavigationPane, DetailsView, Toolbar]
    }
}
</script>

```

### src/components/file-manager-access-control/FileManagerView.vue

```vue
<template>
  <FileManager />
</template>

<script setup>
import FileManager from '../../components/FileManager.vue';
</script>
```