Nested items in Vue File Manager component

18 Nov 201824 minutes to read

The File Manager can be rendered inside other components such as Tab, Dialog, and more.

Adding File Manager inside the dialog
Adding File Manager inside the tab

Adding File Manager inside the dialog

The example below shows the File Manager rendered inside a Dialog. Use the Upload component’s browse button to open the File Manager inside the Dialog.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div>
        <div class="control-section">
            <div id='container' class="fileupload">
                <ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles">
                </ejs-uploader>
                <ejs-button id="openBtn" v-on:click="btnClick">Browse...</ejs-button>
            </div>
            <div id='target' class="control-section">
                <ejs-dialog ref="uploadDialog" id="dialog" v-bind:visible="false" :header='dialogHeader' :animationSettings='animationSettings' :showCloseIcon='showCloseIcon' :open="dialogOpen" :close="dialogClose" :target='target'
                :width='dialogWidth'>
                    <ejs-filemanager ref="filemanagerObj" id="filemanager" :ajaxSettings='ajaxSettings' v-bind:allowMultiSelection="false" :fileOpen="onFileOpen" >
                    </ejs-filemanager>
                </ejs-dialog>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { provide, ref } from "vue";

    import { UploaderComponent as EjsUploader } from '@syncfusion/ej2-vue-inputs';
    import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
    import { DialogComponent as EjsDialog} from '@syncfusion/ej2-vue-popups';
    import { FileManagerComponent as EjsFilemanager, NavigationPane, Toolbar, DetailsView } from "@syncfusion/ej2-vue-filemanager";

    const uploadDialog = ref(null);
    const filemanagerObj = ref(null);
    const uploadObj = ref(null);
    let hostUrl = 'https://physical-service.syncfusion.com/';
    const ajaxSettings = {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
    };
    const dialogHeader = 'Open';
    const showCloseIcon = true;
    const target = '#target';
    const animationSettings = { effect: 'None' };
    const dialogWidth = '850px';
    const btnClick = function() {
        uploadDialog.value.show();
    };
    const dialogOpen = function() {
        var fileObj = filemanagerObj.value.ej2Instances;
        fileObj.refreshLayout();
        document.getElementById('container').style.display = 'none';
    };
    const dialogClose = function() {
        var fileObj = filemanagerObj.value.ej2Instances;
        fileObj.path = "/";
        document.getElementById('container').style.display = 'block';
    };
    const onFileOpen = function(args) {
        let file = args.fileDetails;
        if (file.isFile) {
            args.cancel = true;
            uploadObj.value.files = [{name: file.name, size: file.size, type: file.type }];
            uploadDialog.value.hide();
        }
    };

    provide('filemanager',  [DetailsView, NavigationPane, Toolbar]);

</script>

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";

   .fileupload {
        max-width: 500px;
        margin: auto;
    }
    #openBtn {
        position: absolute;
        top: 25px;
        margin-left: 13px;
        margin-top: 91px;
    }
    #target {
        height: 550px;
    }
    #dialog {
        top: 20px !important;
        max-height: 500px !important;
        left: 30px !important;
    }
</style>
<template>
    <div>
        <div class="control-section">
            <div id='container' class="fileupload">
                <ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles">
                </ejs-uploader>
                <ejs-button id="openBtn" v-on:click="btnClick">Browse...</ejs-button>
            </div>
            <div id='target' class="control-section">
                <ejs-dialog
                    ref="uploadDialog"
                    id="dialog"
                    v-bind:visible="false"
                    :header="dialogHeader"
                    :animationSettings="animationSettings"
                    :showCloseIcon="showCloseIcon"
                    :open="dialogOpen"
                    :close="dialogClose"
                    :target="target"
                    :width="dialogWidth">
                    <div>
                        <ejs-filemanager ref="filemanagerObj" id="filemanager" :ajaxSettings='ajaxSettings' v-bind:allowMultiSelection="false" :fileOpen="onFileOpen" ></ejs-filemanager>
                    <div>
                </ejs-dialog>
            </div>
        </div>
    </div>
</template>
<script>

import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
import { FileManagerComponent, NavigationPane, Toolbar, DetailsView } from "@syncfusion/ej2-vue-filemanager";

let hostUrl = 'https://physical-service.syncfusion.com/';

export default {
name: "App",
components: {
    "ejs-uploader":UploaderComponent,
    "ejs-button":ButtonComponent,
    "ejs-dialog":DialogComponent,
    "ejs-filemanager":FileManagerComponent,
    },
    data () {
        return {
            dialogHeader: 'Open',
            showCloseIcon: true,
            target: '#target',
            animationSettings: { effect: 'None' },
            dialogWidth: '850px',
            ajaxSettings:  {
                url: hostUrl + 'api/FileManager/FileOperations',
                getImageUrl: hostUrl + 'api/FileManager/GetImage',
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                downloadUrl: hostUrl + 'api/FileManager/Download'
            }
        };
    },
    provide: {
            filemanager: [DetailsView, NavigationPane, Toolbar]
    },
    methods:{
        btnClick: function() {
            this.$refs.uploadDialog.show();
        },
        // Uploader will be hidden, if Dialog is opened
        dialogOpen: function() {
            var fileObj = this.$refs.filemanagerObj.ej2Instances;
            fileObj.refreshLayout();
            document.getElementById('container').style.display = 'none';
        },
        // Uploader will be shown, if Dialog is closed
        dialogClose: function() {
            var fileObj = this.$refs.filemanagerObj.ej2Instances;
            fileObj.path = "/";
            document.getElementById('container').style.display = 'block';
        },
        // File Manager's fileOpen event function
        onFileOpen: function(args) {
            let file = args.fileDetails;
            if (file.isFile) {
                args.cancel = true;
                this.$refs.uploadObj.files = [{name: file.name, size: file.size, type: file.type }];
                this.$refs.uploadDialog.hide();
            }
        }
    }
}
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";

   .fileupload {
        max-width: 500px;
        margin: auto;
    }
    #openBtn {
        position: absolute;
        top: 25px;
        margin-left: 13px;
        margin-top: 91px;
    }
    #target {
        height: 550px;
    }
    #dialog {
        top: 20px !important;
        max-height: 500px !important;
        left: 30px !important;
    }
    .fileupload .e-upload .e-file-select-wrap .e-css.e-btn {
        visibility:hidden;
    }
</style>

Adding File Manager inside the tab

The following example demonstrates placing the File Manager inside a Tab’s content area.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div class="e-tab-section">
        <div class="col-lg-8 content-wrapper control-section">
            <div class="e-sample-resize-container">
            <ejs-tab ref="tabObj" id="tab_orientation" :showCloseButton=true heightAdjustMode='Auto'>
                <e-tabitems>
                    <e-tabitem :header='headerText0' :content='OverviewTemplate'></e-tabitem>
                    <e-tabitem :header='headerText1' :content='FilemanagerTemplate'></e-tabitem>
                </e-tabitems>
            </ejs-tab>
            </div>
        </div>
    </div>
</template>
<script setup>
import { FileManagerComponent, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { TabComponent as EjsTab, TabItemsDirective as ETabitems, TabItemDirective as ETabitem } from "@syncfusion/ej2-vue-navigations";
import {createApp} from 'vue';

const app = createApp({});

const Template1 = app.component("demoTemplate1", {
  template: ` <div><div class="cnt-text">Overview</div><div>The File Manager component contains a context menu for performing file operations, large-icons view for displaying the files and folders, and a breadcrumb for navigation. However, these basic functionalities can be extended by using the additional feature modules like toolbar, navigation pane, and details view to simplify the navigation and file operations within the file system</div></div>`,
  data:() => ({})
});

const Template2 = Vue.component("demoTemplate2", {
    components: {
        "ejs-filemanager":FileManagerComponent,
    },
   template: ` <div><div class="content-title">
                   <div class="cnt-text">File Manager with default functionalities</div>
              </div>
              <ejs-filemanager id="file-manager" :ajaxSettings="ajaxSettings">
        </ejs-filemanager></div>`,

  data() {
    return {
       ajaxSettings:
            {
                url: "https://physical-service.syncfusion.com/api/FileManager/FileOperations",
                getImageUrl: "https://physical-service.syncfusion.com/api/FileManager/GetImage",
                uploadUrl: "https://physical-service.syncfusion.com/api/FileManager/Upload",
                downloadUrl: "https://physical-service.syncfusion.com/api/FileManager/Download"
            },
    };
  },
  provide: {
        filemanager: [DetailsView, NavigationPane, Toolbar]
}
});

const headerText0 = { text: 'Overview' };
const headerText1 = { text: 'FileManager' };
const OverviewTemplate = function () {
  return {
      template : Template1
  }
};
const FilemanagerTemplate = function () {
  return {
      template : Template2
  }
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";

.content-title {
    height: 50px;
    display: table;
    margin: 0 auto;
}
.cnt-text {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
}

</style>
<template>
  <div class="e-tab-section">
        <div class="col-lg-8 content-wrapper control-section">
            <div class="e-sample-resize-container">
                <ejs-tab ref="tabObj" id="tab_orientation" :showCloseButton="true">
                <e-tabitems>
                    <e-tabitem :header="headerText0" :content="OverviewTemplate"></e-tabitem>
                    <e-tabitem :header="headerText1" :content="FilemanagerTemplate"></e-tabitem>
                </e-tabitems>
                </ejs-tab>
            </div>
        </div>
    </div>
</template>
<script>

import { TabComponent, TabItemDirective, TabItemsDirective,} from '@syncfusion/ej2-vue-navigations';
import { FileManagerComponent, DetailsView, NavigationPane, Toolbar,} from '@syncfusion/ej2-vue-filemanager';
import { createApp } from 'vue';

var tabTemp = createApp().component('demoTemplate1', {
  template: ` <div><div class="cnt-text">Overview</div><div>The File Manager component contains a context menu for performing file operations, large-icons view for displaying the files and folders, and a breadcrumb for navigation. However, these basic functionalities can be extended by using the additional feature modules like toolbar, navigation pane, and details view to simplify the navigation and file operations within the file system</div></div>`,
  data() {
    return {
      data: {},
    };
  },
});

var fileTemp = createApp().component('demoTemplate2', {
  components: {
    'ejs-filemanager': FileManagerComponent,
  },
  template:
    '<div><div class="content-title"><div class="cnt-text">File Manager with default functionalities</div></div><ejs-filemanager id="file-manager" :ajaxSettings="ajaxSettings"> </ejs-filemanager></div>',
  data() {
    return {
      ajaxSettings: {
        url: 'https://physical-service.syncfusion.com/api/FileManager/FileOperations',
        getImageUrl:
          'https://physical-service.syncfusion.com/api/FileManager/GetImage',
        uploadUrl:
          'https://physical-service.syncfusion.com/api/FileManager/Upload',
        downloadUrl:
          'https://physical-service.syncfusion.com/api/FileManager/Download',
      },
    };
  },
  provide: {
    filemanager: [DetailsView, NavigationPane, Toolbar],
  },
});

export default {
  name: 'App',
  components: {
    'ejs-tab': TabComponent,
    'e-tabitems': TabItemsDirective,
    'e-tabitem': TabItemDirective,
  },
  data: function () {
    return {
      headerText0: { text: 'Overview' },
      headerText1: { text: 'Filemanager' },
      OverviewTemplate: function () {
        return {
          template: tabTemp,
        };
      },
      FilemanagerTemplate: function () {
        return {
          template: fileTemp,
        };
      },
    };
  },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";

.content-title {
  height: 50px;
  display: table;
  margin: 0 auto;
}
.cnt-text {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding: 10px;
}
</style>

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Nested items in Vue File Manager component

Adding File Manager inside the dialog

Adding File Manager inside the tab