ES5 getting started in EJ2 JavaScript File Manager component

31 Jan 202624 minutes to read

The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

Control initialization

Create an app folder myapp in local machine to initialize Essential® JS 2 JavaScript controls.

Use either of the following methods to reference the required scripts and styles.

  • Using local script and style references in an HTML page.
  • Using CDN link for script and style reference.

Using local script and style references in an HTML page

Step 1: Create an app folder myapp for Essential® JS 2 JavaScript controls.

Step 2: You can get the global scripts and styles from the Essential Studio® JavaScript (Essential® JS 2) build installed location.

Syntax:

Script: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js

Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\tailwind3.css

Example:

Script: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-filemanager\dist\global\ej2-filemanager.min.js

Styles: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-filemanager\styles\tailwind3.css

The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file.

Scripts: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js

Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\styles\tailwind3.css

Step 3: Create a folder myapp/resources and copy/paste the global scripts and styles from the above installed location to myapp/resources location.

Step 4: Create an HTML page (index.html) in the myapp location and add the Essential JS 2 script and style references.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 File Manager Control</title>
            <!-- File Manager and its dependent theme -->
            <link href=" resources/ej2-base/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-layouts/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-filemanager/styles/tailwind3.css" rel="stylesheet" />
            <!-- Essential JS 2 File-Manager's global script -->
            <script src="resources/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
            <script src="resources/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="resources/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
            <script src="resources/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
            <script src="resources/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
            <script src="resources/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
            <script src="resources/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
            <script src="resources/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
            <script src="resources/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
            <script src="resources/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

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

Step 5: Add the div element and initialize the Essential® JS 2 File Manager component in the index.html using the following code

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
            <title>Essential JS 2 File Manager Control</title>
            <!-- File Manager and its dependent theme -->
            <link href=" resources/ej2-base/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-layouts/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
            <link href=" resources/ej2-filemanager/styles/tailwind3.css" rel="stylesheet" />
            <!-- Essential JS 2 File-Manager's global script -->
            <script src="resources/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
            <script src="resources/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="resources/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
            <script src="resources/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
            <script src="resources/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
            <script src="resources/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
            <script src="resources/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
            <script src="resources/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
            <script src="resources/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
            <script src="resources/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
       </head>
       <body>
            <!-- Add the HTML <div> element  -->
            <div id="filemanager"></div>
            <script>
              var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
              // initialize File Manager Control
              var filemanagerInstance = new ej.filemanager.FileManager({
                  ajaxSettings: {
                      url: hostUrl + 'api/FileManager/FileOperations'
                  }
              });
              // render initialized File Manager
              filemanagerInstance.appendTo('#filemanager');
            </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.

Step 6: Run index.html in a web browser to render the Essential® JS 2 File Manager component.

Step 1: The Essential® JS 2 controls scripts and styles are already hosted in the below CDN link formats.

Syntax:

Script: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Style: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css

Example:

Script: https://cdn.syncfusion.com/ej2/ej2-filemanager/dist/global/ej2-filemanager.min.js

Styles: https://cdn.syncfusion.com/ej2/ej2-filemanager/styles/tailwind3.css

Step 2: Add CDN global script and style references for the File Manager and its dependent packages in myapp/index.html as shown below.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
            <title>Essential JS 2 File Manager Control</title>
            <!-- File Manager and its dependent theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-layouts/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-grids/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <link href="https://cdn.syncfusion.com/ej2/ej2-filemanager/styles/tailwind3.css" rel="stylesheet" type="text/css"/>
            <!-- Essential JS 2 File Manager's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
       </head>
       <body>
            <!-- Add the HTML <div> element  -->
            <div id="filemanager"></div>
            <script>
              var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
              // initialize File Manager Control
              var filemanagerInstance = new ej.filemanager.FileManager({
                  ajaxSettings: {
                      url: hostUrl + 'api/FileManager/FileOperations'
                  }
              });
              // render initialized File Manager
              filemanagerInstance.appendTo('#filemanager');
            </script>
       </body>
  </html>

When referencing CDN links in the application, ensure the network connection is available.

The following example shows the basic File Manager.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Essential JS 2 File Manager Control</title>
  <!-- File Manager and its dependent theme -->
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet"
    type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet"
    type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/tailwind3.css" rel="stylesheet"
    type="text/css" />
  <!-- Essential JS 2 File Manager's global script -->
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <!-- Add the HTML <div> element  -->
  <div id="filemanager"></div>
  <script>
    var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
    // initialize File Manager Control
    var filemanagerInstance = new ej.filemanager.FileManager({
      ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations'
      },
      height: '380px'
    });
    // render initialized File Manager
    filemanagerInstance.appendTo('#filemanager');
  </script>
</body>

</html>

File download support

To perform the download operation, initialize the downloadUrl property in ajaxSettings of the File Manager component.

<script>
        var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
        // initialize File Manager Control
        var filemanagerInstance = new ej.filemanager.FileManager({
            ajaxSettings: {
                url: hostUrl + 'api/FileManager/FileOperations',
                downloadUrl: hostUrl + 'api/FileManager/Download'
            }
        });
        // render initialized File Manager
        filemanagerInstance.appendTo('#filemanager');
</script>

File upload support

To perform the upload operation, initialize the uploadUrl property in ajaxSettings of the File Manager component.

<script>
        var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
        // initialize File Manager Control
        var filemanagerInstance = new ej.filemanager.FileManager({
            ajaxSettings: {
                url: hostUrl + 'api/FileManager/FileOperations',
                uploadUrl: hostUrl + 'api/FileManager/Upload'
            }
        });
        // render initialized File Manager
        filemanagerInstance.appendTo('#filemanager');
</script>

Image preview support

To enable image preview in the File Manager component, initialize the getImageUrl property in ajaxSettings.

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
  <title>Essential JS 2 File Manager Control</title>
  <!-- File Manager and its dependent theme -->
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <!-- Essential JS 2 File Manager's global script -->
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <!-- Add the HTML <div> element  -->
  <div id="filemanager"></div>
  <script>
    var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
    // initialize File Manager Control
    var filemanagerInstance = new ej.filemanager.FileManager({
      ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage'
      },
      height: '380px'
    });
    // render initialized File Manager
    filemanagerInstance.appendTo('#filemanager');
  </script>
</body>

</html>

Injecting feature modules

The File Manager includes a context menu for file operations, a large-icons view for displaying files and folders, and a breadcrumb for navigation. These functionalities can be extended using additional feature modules such as Toolbar, NavigationPane, and DetailsView to simplify navigation and file operations. Inject these modules using the ej.filemanager.FileManager.Inject() method as follows.

var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// inject feature modules of the File Manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane);
// initialize File Manager Control
var filemanagerInstance = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
    }
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');

The following example shows the File Manager with all feature modules.

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
  <title>Essential JS 2 File Manager Control</title>
  <!-- File Manager and its dependent theme -->
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <!-- Essential JS 2 File Manager's global script -->
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <!-- Add the HTML <div> element  -->
  <div id="filemanager"></div>
  <script>
    var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
    // inject feature modules of the File Manager
    ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane);
    // initialize File Manager Control
    var filemanagerInstance = new ej.filemanager.FileManager({
      ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
      },
      height: '380px'
    });
    // render initialized File Manager
    filemanagerInstance.appendTo('#filemanager');
  </script>
</body>

</html>

Note: Customize the appearance of the File Manager using the cssClass property. This adds a CSS class to the root element, which can be used to add new styles or override existing styles for the File Manager.

Switching initial view of the File Manager

Change the initial view of the File Manager to Details or Large Icons using the view property. By default, the File Manager renders in Large Icons view.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Essential JS 2 File Manager Control</title>
  <!-- File Manager and its dependent theme -->
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <!-- Essential JS 2 File Manager's global script -->
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <!-- Add the HTML <div> element  -->
  <div id="filemanager"></div>
  <script>
    var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
    // inject feature modules of the File Manager
    ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane);
    // initialize File Manager Control
    var filemanagerInstance = new ej.filemanager.FileManager({
      ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
      },
      // Initial view of File Manager is set to details view
      view: "Details",
      height: '380px'
    });
    // render initialized File Manager
    filemanagerInstance.appendTo('#filemanager');
  </script>
</body>

</html>

Maintaining control state on page reload

The File Manager can maintain its state on page reload. Enable the enablePersistence property to preserve the following:

  • Previous view of the File Manager - view
  • Previous path of the File Manager - path
  • Previous selected items of the File Manager - selectedItems 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <title>Essential JS 2 File Manager Control</title>
     <!-- File Manager and its dependent theme -->
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/tailwind3.css" rel="stylesheet"
          type="text/css" />
     <!-- Essential JS 2 File Manager's global script -->
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/dist/global/ej2-layouts.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/dist/global/ej2-buttons.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/dist/global/ej2-popups.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/dist/global/ej2-inputs.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/dist/global/ej2-lists.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/dist/global/ej2-navigations.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/dist/global/ej2-grids.min.js"
          type="text/javascript"></script>
     <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/dist/global/ej2-filemanager.min.js"
          type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
     <!-- Add the HTML <div> element  -->
     <div id="filemanager"></div>
     <script>
          var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
          // inject feature modules of the File Manager
          ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane);
          // initialize File Manager Control
          var filemanagerInstance = new ej.filemanager.FileManager({
               ajaxSettings: {
                    url: hostUrl + 'api/FileManager/FileOperations',
                    getImageUrl: hostUrl + 'api/FileManager/GetImage',
                    uploadUrl: hostUrl + 'api/FileManager/Upload',
                    downloadUrl: hostUrl + 'api/FileManager/Download'
               },
               enablePersistence: true,
               height: '380px'
          });

          // render initialized File Manager
          filemanagerInstance.appendTo('#filemanager');
     </script>
</body>

</html>

Note: Refresh the files of the current folder programmatically by calling the refreshFiles method.

Rendering control in right-to-left direction

Render the File Manager in the right-to-left direction by setting the enableRtl API to true.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Essential JS 2 File Manager Control</title>
  <!-- File Manager and its dependent theme -->
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet"
    type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet"
    type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/tailwind3.css" rel="stylesheet"
    type="text/css" />
  <!-- Essential JS 2 File Manager's global script -->
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/dist/global/ej2-layouts.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/dist/global/ej2-buttons.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/dist/global/ej2-popups.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/dist/global/ej2-inputs.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/dist/global/ej2-lists.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/dist/global/ej2-navigations.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/dist/global/ej2-grids.min.js"
    type="text/javascript"></script>
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/dist/global/ej2-filemanager.min.js"
    type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <!-- Add the HTML <div> element  -->
  <div id="filemanager"></div>
  <script>
    var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
    // inject feature modules of the File Manager
    ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane);
    // initialize File Manager Control
    var filemanagerInstance = new ej.filemanager.FileManager({
      ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
      },
      enableRtl: true,
      height: '380px'
    });
    // render initialized File Manager
    filemanagerInstance.appendTo('#filemanager');
  </script>
</body>

</html>

Specifying the current path of the File Manager

The current path of the File Manager can be specified initially or dynamically using the path property.

var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// inject feature modules of the File Manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane);
// initialize File Manager Control
var filemanagerInstance = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
    },
    // Specify the required current path
    path: '/Food'
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');