Es5 getting started in EJ2 JavaScript File manager control
27 Nov 202324 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.
Component Initialization
Create an app folder myapp
in local machine to initialize Essential JS 2 JavaScript components.
Using either of the following way to refer the required script and styles.
- Using local script and style references in a HTML page.
- Using CDN link for script and style reference.
Using local script and style references in a 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\material.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\material.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\material.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 a HTML page (index.html) in myapp
location and add the Essentials JS 2 script and style references.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 File Manager Component</title>
<!-- File Manager and its dependent theme -->
<link href=" resources/ej2-base/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-popups/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-grids/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-filemanager/styles/material.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 component styles, please make use of our
CRG
(Custom Resource Generator) in your application.
Step 5: Now, add the div
element and initiate the Essential JS 2 File Manager
component in the index.html
by using following code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 File Manager Component</title>
<!-- File Manager and its dependent theme -->
<link href=" resources/ej2-base/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-popups/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-grids/styles/material.css" rel="stylesheet" />
<link href=" resources/ej2-filemanager/styles/material.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 component
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 while initializing the file manager. File manager utilizes the URL’s mentioned in ajaxSettings to send file operation request to the server.
The File Manager service link is given inhostUrl
.
Step 6: Now, run the index.html
in web browser, it will render the Essential JS 2 file manager component.
Using CDN link for script and style reference
Step 1: The Essential JS 2 components 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/material.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/material.css
Step 2: Have to add CDN
global script and style for file manager and its dependent packages in myapp/index.html
like below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 file manager Component</title>
<!-- file manager and its dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/ej2-filemanager/styles/material.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 component
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 application, always ensure the network connection will be in enabled state.
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 Component</title>
<!-- file manager and its dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 file manager's global script -->
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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 component
var filemanagerInstance = new ej.filemanager.FileManager({
ajaxSettings: {
url: hostUrl + 'api/FileManager/FileOperations'
}
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
</script>
</body>
</html>
File Download support
To perform the download operation, initialize the downloadUrl
property in a ajaxSettings of File Manager component.
<script>
var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize File Manager component
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 a ajaxSettings of File Manager Component.
<script>
var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize File Manager component
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 perform the image preview support in the File Manager component, need to initialize the getImageUrl
property in a ajaxSettings of File Manager component.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 file manager Component</title>
<!-- file manager and its dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 file manager's global script -->
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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 component
var filemanagerInstance = new ej.filemanager.FileManager({
ajaxSettings: {
url: hostUrl + 'api/FileManager/FileOperations',
getImageUrl: hostUrl + 'api/FileManager/GetImage'
}
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
</script>
</body>
</html>
Injecting feature modules
Basically, the file manager component contains a context menu for performing file operations, large-icons view for displaying the files and folders, and a breadcrumb for navigation. However, these basic functionalities can be extended by using the additional feature modules like toolbar, navigation pane, and details view to simplify the navigation and file operations within the file system. The above modules can be injected using the ej.filemanager.FileManager.Inject()
method in the script 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 component
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 you the File Manager with all feature modules.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 file manager Component</title>
<!-- file manager and its dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 file manager's global script -->
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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 componentej.filemanager.NavigationPane);
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');
</script>
</body>
</html>
Note: The appearance of the File Manager can be customized by using cssClass property. This adds a css class to the root of the File Manager which can be used to add new styles or override existing styles to the File Manager.
Switching initial view of the File Manager
The initial view of the File Manager can be changed to details or largeicons view with the help of view property. By default, the File Manager will be rendered in large icons view. When the File Manager is initially rendered, created will be triggered. This event can be utilized for performing operations once the File Manager has been successfully created.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 file manager Component</title>
<!-- file manager and its dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 file manager's global script -->
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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 componentej.filemanager.NavigationPane);
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",
// File Manager's created event
created: onCreate
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
// File Manager's created event function
function onCreate(args){
console.log("File Manager has been created successfully");
}
</script>
</body>
</html>
Maintaining component state on page reload
The File Manager supports maintaining the component state on page reload. This can be achieved by enabling enablePersistence property which maintains the following,
- Previous view of the File Manager - View
- Previous path of the File Manager - Path
- Previous selected items of the File Manager - SelectedItems
For every operation in File Manager, ajax request will be sent to the server which then processes the request and sends back the response. When the ajax request is success, success event will be triggered and failure event will be triggered if the request gets failed.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 file manager Component</title>
<!-- file manager and its dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 file manager's global script -->
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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 componentej.filemanager.NavigationPane);
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,
// File Manager's onSuccess event
success: onAjaxSuccess,
// File Manager's onError event
failure: onAjaxFailure
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
// File Manager's file onSuccess function
function onAjaxSuccess(args){
console.log("Ajax request successful");
}
// File Manager's file onError function
function onAjaxFailure(args){
console.log("Ajax request has failed");
}
</script>
</body>
</html>
Note: The files of the current folder opened in the File manager can be refreshed programatically by calling refreshFiles method.
Rendering component in right-to-left direction
It is possible to render the File Manager in 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 Component</title>
<!-- file manager and its dependent theme -->
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-filemanager/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 file manager's global script -->
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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 componentej.filemanager.NavigationPane);
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
});
// 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 componentej.filemanager.NavigationPane);
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');