Getting started with TypeScript File Manager control

18 Nov 20185 minutes to read

This section explains the steps to create a simple File Manager and demonstrates the basic usage of the File Manager component using the Essential® JS 2
quickstart seed repository. This seed repository is pre-configured with the Essential® JS 2 package.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. For more information about webpack and its features, refer to the webpack documentation.

Prerequisites

To get started with application, ensure the following software to be installed in the machine.

Requirement Version
git Latest version
Node.js 14.15.0 or above
Visual Studio Code Latest version

Browser support

Browser Supported versions
Chrome 63+
Firefox 58+
Opera 50+
Edge 13+
IE 11+
Safari 9+
iOS 9+
Android 4.4+
Windows Mobile IE 11+

Setup for local development

Clone the Essential® JS 2 quickstart application project from GitHub using the following command line scripts.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack
cd ej2-quickstart-webpack

Adding Syncfusion® TypeScript File Manager package

Syncfusion® TypeScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

Use the following command to install the @syncfusion/ej2-filemanager package:

npm install @syncfusion/ej2-filemanager --save

Then, install the remaining dependent npm packages using the following command:

npm install

Adding CSS reference

Themes for Syncfusion® File Manager components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Tailwind 3 theme package using the following command:

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the ~src/style.css file:

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

Adding File Manager control

Add the File Manager component in src/app/app.ts file using the following code.

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

FileManager.Inject(Toolbar, NavigationPane, DetailsView);

let hostUrl: string = 'https://physical-service.syncfusion.com/';
let filemanagerInstance: FileManager = new FileManager({
  ajaxSettings: {
    url: hostUrl + 'api/FileManager/FileOperations'
  }
});

filemanagerInstance.appendTo('#filemanager');
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.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>

Server-side setup

The sample uses https://physical-service.syncfusion.com as the url endpoint in ajaxSettings.

To use your own files, host a File Manager service and replace the url value with your service endpoint. See the File System Provider documentation for setup details.

Note: The ajaxSettings property must be defined while initializing the File Manager. File Manager utilizes the URLs mentioned in ajaxSettings to send file operation requests to the server. The File Manager service link is provided in the hostUrl variable.

Run the application

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

npm run dev

Registering Syncfusion license

Syncfusion® Essential® JS 2 components require a valid license key from version 16.2.0.41 onwards. Using the components without a license key will display a license validation message in the browser console.

Steps to register the license key:

  1. Sign in to the Syncfusion License Portal and copy your license key.
  2. Register the key in your src/app/app.ts file, before instantiating any Syncfusion component:
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY_HERE');

For more details on obtaining and registering a license key, refer to the License Key Generation and License Key Registration documentation.

Troubleshooting

File Manager styles are not applied: Ensure that the required Syncfusion theme package is installed and the theme CSS is imported correctly in the src/styles/styles.css file.

Trial license warning message: Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the Registering a license key section.

See also