We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The Vue File Manager (File Explorer) is a graphical user interface component for managing the file system that allows users to perform most common file operations, like accessing, editing, and sorting files or folders. This component provides easy navigation to select a file or folder from the file system.
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.
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.
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.
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.
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.
The Vue File Manager component enables easy file uploading and downloading in a file system.
Files and folders in the file system can be sorted in either ascending or descending order simply by clicking the column header. Files and folders can be sorted based on name, date created, size, and other details.
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.
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.
Restrict access to files and folders by defining a set of rules for them. Only authorized users will be able to access them.
You can specify the types of files that can be uploaded in the File Manager. Other file types will be restricted from uploading.
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.
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.
The text of the context menu and tooltips displayed in the user interface can be localized to any supported language. The File Manager component uses a localization library (l10n) to localize the text values.
The context menu improves user interaction with the Vue File Manager using a pop-up menu. It appears when a file, folder, or layout is right-clicked. Users can add custom context menu items to the built-in ones.
The File Manager component allows you to manage data from the following storage services.
Links to the service providers are supplied below.
Amazon S3 bucket file provider.
Microsoft Azure file provider.
Firebase Realtime Database file provider.
The Vue File Manager layout supports several built-in themes: Material, Bootstrap, Fabric (Office 365), and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look by either simply overriding the Sass variables or using our Theme Studio application.
Developers have control over all the UI elements and behaviors of the component to provide the best experience to end users through a rich set of developer-friendly APIs.
The File Manager layout component is also available in Blazor, React, Angular, and JavaScript frameworks. Check out the different File Manager layout platforms from the links below,
Easily get started with the Vue File Manager using a few simple lines of Vue codes as demonstrated below. Also explore our Vue File Manager Example that shows you how to render and configure a File Manager in Vue.
<template>
<div>
<div class="control-section file-overview">
<div class="sample-container">
<ejs-filemanager id="overview_file" :ajaxSettings='ajaxSettings' :view='view' >
</ejs-filemanager>
</div>
</div>
</div>
</template>
<style>
.file-overview .sample-container {
margin: 10px 10px 10px 10px;
}
</style>
<script>
import Vue from "vue";
import { FileManagerPlugin, NavigationPane, Toolbar, DetailsView, FileManagerComponent } from "@syncfusion/ej2-vue-filemanager";
Vue.use(FileManagerPlugin);
/**
* File Manager full functionalities sample
*/
let hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
export default Vue.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>You can find our Vue File Manager demo, which demonstrates how to render and configure the File Manager.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
A good place to start would be our comprehensive getting started documentation.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
