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


The React 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 for browsing folders to select a file or folder from the file system.

Customizable layout design

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


The React File Manager toolbar contains the tools for performing various operations like file upload or download and view switching. The toolbar can also be configured to add any custom functionality to be performed with the file system.

React File Manager with toolbar.

React File Manager navigation pane.

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

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 large icons view or details view.

Content pane in File Manager.

File operations

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

File upload and download.

File upload and download

The React File Manager component allows for the easy uploading and downloading of files 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, etc.

File sorting.

File searching.


The File Manager component contains built-in searching functionality that allows you to search for and access a file or folder in the current path, as well as 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 in the File Manager.

Drag and drop.

Access control.

Access control restriction

The File Manager provides support to restrict access to files and folders by defining a set of rules for them. Only authorized users will be able to access them.

Restrict file types on upload

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

Restrict file types.

Multiple file selection.

Multiple-file selection

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

Quick access menu

The React File Manager component has context menu support to list the operations to 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 preference.

Quick access menu.



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

Manage storage services

The File Manager component allows you to manage data from the following storage services.

Local storage service

Find the service links below:


ASP.NET Core file provider.

ASP.NET MVC file provider.

Node.js framework

Node.js file system.

Cloud storage service

Find the service links below:

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 service

Find the service links below:

SQL Server database

SQL database file provider.

Network Protocol service

Find the service links below:

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

The React 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 with a rich set of developer-friendly APIs.

Other supported frameworks

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

React File Manager Code Example

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

import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    render() {
        return (<div className="control-section">
        <FileManagerComponent id="file" ajaxSettings= />


Frequently Asked Questions

  • A lightweight and modern user interface for easy and effective management of files in the file system.
  • Performs all basic file operations like upload, download, delete, create, sort, search and rename along with an out of box option to preview images in the file system.
  • Supports different kinds of file system providers like physical, FTP, SQL, Node JS, Azure, Amazon S3, Firebase, and Google drive.
  • One of the best React Diagram in the market that offers feature-rich UI to interact with the software.
  • Built-in support for access control.
  • Simple configuration and API.
  • Supports all modern browsers.
  • Mobile-touch friendly and responsive.
  • Expansive learning resources such as demos and documentation to learn quickly and get started with React File Manager.

We do not sell the React File Manager separately. It is only available for purchase as part of the Syncfusion React suite, which contains over 80 React components, including the File Manager. A single developer license for the Syncfusion Essential Studio for React suite costs $995.00 USD, including one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

You can find our React File Manager demo here.

No, our 80+ React components, including File Manager, are not sold individually, only as a single package. However, we have competitively priced the product so it only costs a little bit more than what some other vendors charge for their File Manager alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 80+ React components for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

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

(340+ Reviews)
Read more on Capterra
(390+ Reviews)
Read more on G2
(340+ Reviews)
Read more on GetApp

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


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