• vue

<template><div><divclass="control-section file-overview"><divclass="sample-container"><ejs-filemanagerid="overview_file":ajaxSettings='ajaxSettings':view='view'></ejs-filemanager></div></div></div></template><style>.file-overview.sample-container{margin:10px10px10px10px;}</style><script>importVuefrom"vue";import{FileManagerPlugin,NavigationPane,Toolbar,DetailsView,FileManagerComponent}from"@syncfusion/ej2-vue-filemanager";Vue.use(FileManagerPlugin);/** * File Manager full functionalities sample */lethostUrl='https://ej2-aspcore-service.azurewebsites.net/';exportdefaultVue.extend({data:function(){return{ajaxSettings:{url:hostUrl+'api/FileManager/FileOperations',getImageUrl:hostUrl+'api/FileManager/GetImage',uploadUrl:hostUrl+'api/FileManager/Upload',downloadUrl:hostUrl+'api/FileManager/Download'},view:"Details"};},provide:{filemanager:[NavigationPane,DetailsView,Toolbar]}});</script>

Flat JSON data binding

The File Manager component supports rendering flat JSON data objects, eliminating the need for HTTP client requests and back-end URL configuration. All file operations can be handled within the component itself through file action events.

• Flat data demo

Customizable layout design

The Vue File Manager UI consists of a toolbar, navigation pane, and content pane through which the files or folders in the file system can be accessed and managed. The component’s entire layout can be customized with features like right-to-left alignment, enabling or disabling the toolbar and navigation pane, and switching between views.

• Customization documentation

Toolbar

The Vue File Manager toolbar contains tools for performing various operations like upload file, download file, and switch views. The toolbar can also be configured with any custom functionality to be performed on the file system.

• Vue File Manager Toolbar support

Navigation pane

The Vue File Manager navigation pane allows quick and direct access to a file or folder in a file system where the entire folder hierarchy is listed using a tree view. This can be made visible or hidden as needed.

• Navigation pane in Vue File Manager

Content pane

The content pane displays the files and folders in the file system. The files in the content pane can be displayed in either a large icon view or a details view.

• Files view documentation

File operations

The Vue File Manager component includes all the common operations needed for managing a file system: copy, move, upload, download, edit, create, delete, and sort.

• File operations in Vue File Manager

File upload and download

The Vue File Manager component enables easy file uploading and downloading in a file system.

• File upload documentation
• File download documentation

Sorting

Files and folders in the file system can be sorted in ascending or descending order by clicking the column header. Files and folders can be sorted based on name, date created, size, and other details. The default sorting functionality can also be customized in the File Manager.

Searching

The File Manager component contains built-in search functionality that allows you to search for and access a file or folder in the current path and its child folders.

• File search documentation

Moving files and folders with drag and drop

Files and folders can be moved within the file system by dragging and dropping them. Drag-and-drop support can be turned on or off in the File Manager.

• Move files and folder documentation
• Drag and Drop Support in Vue File Manager

Access control restriction

Restrict access to files and folders by defining a set of rules for them. Only authorized users will be able to access them.

• Access control example
• Access control in Vue File Manager

Restrict upload file types

You can specify the types of files that can be uploaded in the File Manager. Other file types will be restricted from uploading.

Multiple-file selection

The File Manager component has built-in support for the selection of multiple files or folders. Multiple-file selection is useful when a single operation like download or delete needs to be performed for multiple files in the file system.

• Multiple Selection in Vue File Manager

Directory upload

The Vue File Manager control has support to upload a directory (folder) with its subfolders and files.

• Directory upload example

Chunk upload

The File Manager supports the chunk upload feature, which allows large files to be split into smaller chunks based on the specified chunk size and uploaded sequentially to the server. This improves reliability and performance when handling massive file uploads.

Quick access menu

The File Manager component provides a context menu to list the operations that can be performed with the files and folders. It appears when a file or folder is right-clicked. The context menu items can be customized according to user preferences.

• Context menu documentation

Other supported frameworks

The File Manager is available for the Blazor, React, Angular, and JavaScript frameworks. Explore its platform-specific options through the following links:

• Blazor File Manager
• React File Manager
• Angular File Manager
• JavaScript File Manager

Supported browsers

The Vue File Manager works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.