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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The JavaScript 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.


Customizable layout design

The JavaScript 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 control’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.

Toolbar

The JavaScript 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.

JavaScript File Manager with toolbar.


JavaScript File Manager with navigation pane.

The 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.


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.

Content pane in JavaScript File Manager.


File operations

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

File upload and download in JavaScript File Manager.

File upload and download

The JavaScript File Manager control enables easy file uploading and downloading in a file system.


Sorting

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.

File sorting in JavaScript File Manager.


File searching in JavaScript File Manager.

Searching

The File Manager control 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.


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.

Drag and drop in JavaScript File Manager.


Access control in JavaScript 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.


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.

Restrict file types in JavaScript File Manager.


Multiple file selection in JavaScript File Manager.

Multiple file selection

The File Manager control 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.


Quick access menu

The File Manager control 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.

Quick access menu in JavaScript File Manager.


Localization in JavaScript File Manager.

Localization

The text of the context menu and tooltips displayed in the user interface can be localized to any supported language. The File Manager control uses a localization library (l10n) to localize the text values.


Context menu

The context menu improves user interaction with the JavaScript 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.

JavaScript File Manager with Context Menu.


Manage storage service providers

The File Manager control allows you to manage data from storage services.

Links to the service providers are supplied below.

Local storage services

PhysicalFileProvider

ASP.NET Core file provider.

ASP.NET MVC file provider.

Node.js framework

Node.js file system.

Cloud storage services

Amazon S3 bucket cloud storage

Amazon S3 bucket file provider.

Microsoft Azure cloud storage

Microsoft Azure file provider.

Google Drive cloud storage

Google Drive file provider.

Firebase Realtime Database cloud storage

Firebase Realtime Database file provider.

IBM Cloud Object Storage

IBM Cloud Object Storage file provider.

Database storage services

SQL Server database

SQL Server database file provider.

Network protocol services

File Transfer Protocol service

File Transfer Protocol file provider.


Web accessibility

  • Follows WAI-ARIA best practices for implementing keyboard interaction.
  • Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew and Arabic.

Built-in themes

JavaScript File Manager layout supports several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, 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.

Developer-friendly APIs

Developers have control over all the UI elements and behaviors of the components to provide the best experience to end users through a rich set of developer-friendly APIs.


Other supported frameworks

The File Manager component is also available in Blazor, React, Angular, and Vue frameworks. Check out the different File Manager platforms from the links below:


JavaScript File Manager code example

Easily get started with the JavaScript File Manager using a few simple lines of HTML and TS code example as demonstrated below. Also explore our JavaScript File Manager Example that shows you how to render and configure a File Manager in JavaScript.

<div class="control-section">
    <div class="sample-container">
        <!-- Initialize FileManager -->
        <div id="filemanager"></div>
    </div>
</div>
import { loadCultureFiles } from '../common/culture-loader';
import { FileManager, Toolbar, NavigationPane, DetailsView, ContextMenu } from '@syncfusion/ej2-filemanager';

FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu);

/**
 * File Manager full functionalities sample
 */

    loadCultureFiles();
    let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
    let fileObject: FileManager = new FileManager({
        ajaxSettings: {
            url: hostUrl + 'api/FileManager/FileOperations',
            getImageUrl: hostUrl + 'api/FileManager/GetImage',
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            downloadUrl: hostUrl + 'api/FileManager/Download'
        },
        view: 'Details'
    });
    fileObject.appendTo('#filemanager');



80+ JAVASCRIPT UI CONTROLS

Frequently Asked Questions

  • A lightweight, modern user interface for easy and effective management in a file system.
  • Support for all basic file operations, like upload, download, delete, create, sort, search, and rename, along with an out of the box option to preview images in the file system.
  • Support for different kinds of file system providers like physical, FTP, SQL, Node.js, Azure, Amazon S3, Firebase, and Google Drive.
  • One of the best JavaScript File Manager controls on the market, offering a feature-rich UI.
  • Built-in support for access control.
  • Simple configuration and API.
  • Support for all modern browsers.
  • Touch-friendly and responsive.
  • Expansive learning resources such as demos and documentation to let you get started quickly with JavaScript File Manager.

You can find our JavaScript 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.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

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.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile