Getting Started with React File Manager Component

30 Jun 20263 minutes to read

This section explains how to create and configure the File Manager component in a React application.

To get started quickly with the React File Manager, refer to the video below:

Setup for local development

Easily set up a React application using create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.

Initial_setup

Terminate the application, then run the following command:

cd my-app

Adding React File Manager packages

To install the File Manager component, use the following command:

npm i @syncfusion/ej2-react-filemanager

Adding CSS reference

To install the Tailwind3 theme package, use the following command:

npm i @syncfusion/ej2-tailwind3-theme

In this package, the File Manager component includes an index.css file that automatically loads all the required dependency styles. Add the following import to the src/App.css file.

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css";

To reference App.css in the application, import it into the src/App.tsx file. Also, remove any unnecessary styles from src/index.css and src/App.css, as they may affect the File Manager component UI.

Note: If you want to use combined component styles, make use of the Custom Resource Generator (CRG) in your application.

Adding File Manager component

The File Manager component code should be placed in the src/App.tsx file.

To enable file operation functionality in the File Manager, configure the url property within the ajaxSettings. This URL handles the file operation requests from the server.

import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import './App.css';

function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    let ajaxSettings = {
        url: hostUrl + "api/FileManager/FileOperations"
    };
    let height = "375px";

    return (
        <FileManagerComponent id="file" height={height} ajaxSettings={ajaxSettings} />
    );
}
export default App;
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import './App.css';

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  let ajaxSettings: object = {
    url: hostUrl + "api/FileManager/FileOperations"
  };
  let height: string = "375px";

  return (
    <FileManagerComponent id="file" height={height} ajaxSettings={ajaxSettings} />
  );
}
export default App;
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css";

Run the application

npm run dev

See also