Nested items in Vue File Manager component

19 Feb 202524 minutes to read

File Manager can be rendered inside the other components like Tab, Dialog, and more.

Adding File Manager inside the dialog

The following example shows the File Manager component rendered inside the dialog. Click the browse button in the Upload element to open the File Manager inside the Dialog component.

<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://ej2-aspcore-service.azurewebsites.net/';
    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-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";

   .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://ej2-aspcore-service.azurewebsites.net/';

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-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";

   .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 that the File Manager component is placed inside the content area of tab element.

<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://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]
}
});

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-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";

.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://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],
  },
});

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-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";

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