Getting Started with the Vue File Manager Component in Vue 2

25 Apr 202524 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project usingVue-CLI and integrating the Syncfusion^® Vue Filemanager component

Prerequisites

System requirements for Syncfusion^® Vue UI components

Dependencies

The following are the dependencies required to use the File Manager component in your application:

|--@syncfusion/ej2-vue-filemanager|--@syncfusion/ej2-vue-base|--@syncfusion/ej2-vue-grids|--@syncfusion/ej2-vue-navigations|--@syncfusion/ej2-vue-inputs|--@syncfusion/ej2-vue-lists|--@syncfusion/ej2-vue-popups|--@syncfusion/ej2-vue-buttons|--@syncfusion/ej2-base|--@syncfusion/ej2-data|--@syncfusion/ej2-grids|--@syncfusion/ej2-filemanager|--@syncfusion/ej2-navigations|--@syncfusion/ej2-inputs|--@syncfusion/ej2-lists|--@syncfusion/ej2-popups|--@syncfusion/ej2-buttons

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use thevue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/clivue create quickstartcd quickstartnpm run serve

yarn global add @vue/clivue create quickstartcd quickstartyarn run serve

When creating a new project, choose the optionDefault ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once thequickstart project is set up with default settings, proceed to add Syncfusion^® components to the project.

Add Syncfusion^® Vue packages

Syncfusion^® packages are available atnpmjs.com. To use Vue components, install the required npm package.

This article uses theVue File Manager component as an example. Install the@syncfusion/ej2-vue-filemanager package by running the following command:

npm install @syncfusion/ej2-vue-filemanager --save

yarn add @syncfusion/ej2-vue-filemanager

Import Syncfusion^® CSS styles

You can import themes for the Syncfusion^® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN,CRG andTheme Studio. Refer tothemes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

In this article, theMaterial theme is applied using CSS styles, which are available in installed packages. The necessaryMaterial CSS styles for the File Manager component and its dependents were imported into the<style> section ofsrc/App.vue file.

~/src/App.vue

<style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

Note: If you want to refer the combined component styles, please make use of ourCRG (Custom Resource Generator) in your application.

Add Syncfusion^® Vue component

Follow the below steps to add the Vue File Manager component:

1. First, import and register the File Manager component in thescript section of thesrc/App.vue file.

Composition API (~/src/App.vue)
Options API ~/src/App.vue

<scriptsetup>import{FileManagerComponentasEjsFilemanager}from"@syncfusion/ej2-vue-filemanager";</script>

<script>import{FileManagerComponent}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FilemanagerComponent},}</script>

2. In thetemplate section, define the File Manager component withajaxSettings property.

~/src/App.vue

<template><divid="app"><ejs-filemanagerid="file-manager":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template>

3. Declare the value for theajaxSettings property in thescript section.

Composition API (~/src/App.vue)
~/src/App.vue

<scriptsetup>constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"};</script>

<script>data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"}}}</script>

Here is the summarized code for the above steps in thesrc/App.vue file:

~/src/App.vue
~/src/App.vue

<template><divid="app"><ejs-filemanagerid="file-manager":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><scriptsetup>import{FileManagerComponentasEjsFilemanager}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

<template><divid="app"><ejs-filemanagerid="file-manager":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><script>import{FileManagerComponent}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FileManagerComponent},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"}}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

Run the project

To run the project, use the following command:

npm run serve

yarn run serve

File Download support

To perform the download operation, initialize thedownloadUrl property in aajaxSettings of File Manager component.

Composition API (~/src/App.vue)
Options API ~/src/App.vue

<scriptsetup>import{FileManagerComponentasEjsFilemanager}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"};</script>

<script>import{FileManagerComponent}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{'ejs-filemanager':FileManagerComponent},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"}}}}</script>

File Upload support

To perform the upload operation, initialize theuploadUrl property in aajaxSettings of File Manager Component.

Composition API (~/src/App.vue)
Options API ~/src/App.vue

<scriptsetup>import{FileManagerComponentasEjsFilemanager}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"};</script>

<script>import{FileManagerComponent}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{'ejs-filemanager':FileManagerComponent},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"}}}}</script>

Image Preview support

To perform the image preview support in the File Manager component, need to initialize thegetImageUrl property in aajaxSettings of File Manager component.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divid="app"><ejs-filemanagerid="file-manager":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><scriptsetup>import{FileManagerComponentasEjsFilemanager}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage"}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

<template><divid="app"><ejs-filemanagerid="file-manager":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><script>import{FileManagerComponent}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FileManagerComponent},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage"}}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

Injecting feature modules

Basically, the File Manager component contains large-icons view for displaying the files and folders, a breadcrumbbar for navigation and context menu for performing operations. However, these basic functionalities can be extended by using the additional feature modules like detailsview, toolbar, navigation pane, and context menu to change the layout and to simplify the navigation and file operations within the file system. The above modules can be injected usingprovide.

The following example shows you the File Manager with all feature modules.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divid="app"><divclass="wrapper"><ejs-filemanagerid="overview_filemanager":ajaxSettings="ajaxSettings":view="view"></ejs-filemanager></div></div></template><scriptsetup>import{provide}from"vue";import{FileManagerComponentasEjsFilemanager,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"};constview="Details";provide('filemanager',[DetailsView,NavigationPane,Toolbar]);</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

<template><divid="app"><divclass="wrapper"><ejs-filemanagerid="overview_filemanager":ajaxSettings="ajaxSettings":view="view"></ejs-filemanager></div></div></template><script>import{FileManagerComponent,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FileManagerComponent,},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"},// Initial view of File Manager is set to details viewview:"Details"}},//Injecting additional modules in FileManagerprovide:{filemanager:[DetailsView,NavigationPane,Toolbar]}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

Note: The appearance of the File Manager can be customized by usingcssClass property. This adds a css class to the root of the File Manager which can be used to add new styles or override existing styles to the File Manager.

Switching initial view of the File Manager

The initial view of the File Manager can be changed to details or largeicons view with the help ofview property. By default, the File Manager will be rendered in large icons view. When the File Manager is initially rendered,created will be triggered. This event can be utilized for performing operations once the File Manager has been successfully created.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divid="app"><ejs-filemanagerid="file-manager":view="view":created="onCreate":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><scriptsetup>import{provide}from"vue";import{FileManagerComponentasEjsFilemanager,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"};provide('filemanager',[DetailsView,NavigationPane,Toolbar]);constview="Details";constonCreate=()=>{console.log("File Manager has been created successfully");}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

<template><divid="app"><ejs-filemanagerid="file-manager":view="view":created="onCreate":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><script>import{FileManagerComponent,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FileManagerComponent},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"},// Initial view of File Manager is set to details viewview:"Details"};},provide:{filemanager:[DetailsView,NavigationPane,Toolbar]},methods:{// File Manager's created event functiononCreate(){console.log("File Manager has been created successfully");}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

Maintaining component state on page reload

The File Manager supports maintaining the component state on page reload. This can be achieved by enablingenablePersistence property which maintains the following,

Previous view of the File Manager -View
Previous path of the File Manager -Path
Previous selected items of the File Manager -SelectedItems

For every operation in File Manager, ajax request will be sent to the server which then processes the request and sends back the response. When the ajax request is success,success event will be triggered andfailure event will be triggered if the request gets failed.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divid="app"><ejs-filemanagerid="file-manager":enablePersistence="enablePersistence":ajaxSettings="ajaxSettings":success="onAjaxSuccess":failure="onAjaxFailure"></ejs-filemanager></div></template><scriptsetup>import{provide}from"vue";import{FileManagerComponentasEjsFilemanager,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"};constenablePersistence=true;provide('filemanager',[DetailsView,NavigationPane,Toolbar]);constonAjaxSuccess=()=>{console.log("Ajax request successful");};constonAjaxFailure=()=>{console.log("Ajax request has failed");};</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

<template><divid="app"><ejs-filemanagerid="file-manager":enablePersistence="enablePersistence":ajaxSettings="ajaxSettings":success="onAjaxSuccess":failure="onAjaxFailure"></ejs-filemanager></div></template><script>import{FileManagerComponent,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FileManagerComponent},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"},enablePersistence:true};},provide:{filemanager:[DetailsView,NavigationPane,Toolbar]},methods:{// File Manager's file onSuccess functiononAjaxSuccess(){console.log("Ajax request successful");},// File Manager's file onError functiononAjaxFailure(){console.log("Ajax request has failed");}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

Note: The files of the current folder opened in the File Manager can be refreshed programatically by callingrefreshFiles method.

Rendering component in right-to-left direction

It is possible to render the File Manager in right-to-left direction by setting theenableRtl API to true.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divid="app"><ejs-filemanagerid="file-manager":enableRtl="enableRtl":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><scriptsetup>import{provide}from"vue";import{FileManagerComponentasEjsFilemanager,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"};constenableRtl=true;provide('filemanager',[DetailsView,NavigationPane,Toolbar]);</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

<template><divid="app"><ejs-filemanagerid="file-manager":enableRtl="enableRtl":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><script>import{FileManagerComponent,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FileManagerComponent},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"},enableRtl:true};},provide:{filemanager:[DetailsView,NavigationPane,Toolbar]}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

Specifying the current path of the File Manager

The current path of the File Manager can be specified initially or dynamically using thepath property.

The following code snippet demonstrates specifying the current path in File Manager on rendering.

Composition API (~/src/App.vue)
Options API ~/src/App.vue

<template><divid="app"><ejs-filemanagerid="file-manager":path="path":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><scriptsetup>import{provide}from"vue";import{FileManagerComponentasEjsFilemanager,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";constajaxSettings={url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"};// Initial view of File Manager is set to details viewconstview="Details";// Specify the required current pathconstpath:'/Food';provide('filemanager',[DetailsView,NavigationPane,Toolbar]);</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

<template><divid="app"><ejs-filemanagerid="file-manager":path="path":ajaxSettings="ajaxSettings"></ejs-filemanager></div></template><script>import{FileManagerComponent,DetailsView,NavigationPane,Toolbar}from"@syncfusion/ej2-vue-filemanager";exportdefault{name:"App",components:{"ejs-filemanager":FilemanagerComponent,},data(){return{ajaxSettings:{url:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",getImageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",uploadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",downloadUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"},// Initial view of File Manager is set to details viewview:"Details",// Specify the required current pathpath:'/Food'};},provide:{filemanager:[DetailsView,NavigationPane,Toolbar]}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-icons/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";@import"../node_modules/@syncfusion/ej2-navigations/styles/material.css";@import"../node_modules/@syncfusion/ej2-layouts/styles/material.css";@import"../node_modules/@syncfusion/ej2-grids/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";</style>

NOTE
You can refer to ourVue File Manager feature tour page for its groundbreaking feature representations. You can also explore ourVue File Manager example that shows you how to render the File Manager in Vue.

Help us improve this page

Correct inaccurate or outdated content