Syncfusion AI Assistant

How can I help you?

Getting started in EJ2 TypeScript File Manager control

30 May 20263 minutes to read

This section explains how to create a simple File Manager and demonstrates the basic usage of the File Manager control.

Prerequisites

This guide uses Vite as the bundler and development environment. Install Node.js 24.13.0 or higher before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the Vite documentation.

Create a TypeScript application.

To set-up a Typescript application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template vanilla-ts

This command will prompt you to install the required packages and start the application. Select the options as shown below.

File Manager Initial setup

As Syncfusion packages are not installed yet, currently, the No option will be selected. Then, navigate to the project directory using the following command:

cd my-app

Adding Syncfusion® File Manager package

All the available Essential® JS 2 packages are published in npmjs.com public registry. To install File Manager component, use the following command.

npm i @syncfusion/ej2-filemanager

Adding CSS reference

Add the following imports inside the ~/src/styles.css file to include the tailwind3 theme styles:

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-filemanager/styles/tailwind3.css";

Adding File Manager control

To get started, add the File Manager control in main.ts and index.html files. File Manager can be initialized through div element.

import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';
import './style.css';

FileManager.Inject(Toolbar, NavigationPane, DetailsView);

let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
let filemanagerInstance: FileManager = new FileManager({
  ajaxSettings: {
    url: hostUrl + 'api/FileManager/FileOperations'
  }
});

filemanagerInstance.appendTo('#filemanager');
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-filemanager/styles/tailwind3.css";
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-app</title>
  </head>
  <body>
    <div id="filemanager"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Note: The ajaxSettings must be defined when initializing the File Manager. The File Manager uses the URLs specified in ajaxSettings to send file operation requests to the server. The File Manager service link is provided in hostUrl.

Run the application

Use the following command to run the application in the browser.

npm run dev

See also