FileExplorer provides a Windows Explorer-like functionality for any web application. It allows end-users to browse, select and upload files or change the folder structure by renaming, moving and deleting files or folders. File and folder management capabilities are fully customizable and can be disabled when necessary.

{% highlight html %}

{% endhighlight %}

{% highlight html %}

{% endhighlight %}

• module:jQuery

• module:jsrender.min.js

• module:ej.core.js

• module:ej.data.js

• module:ej.globalize.js

• module:ej.scroller.js

• module:ej.draggable.js

• module:ej.button.js

• module:ej.treeview.js

• module:ej.uploadbox.js

• module:ej.waitingpopup.js

• module:ej.dialog.js

• module:ej.splitter.js

• module:ej.toolbar.js

• module:ej.tooltip.js

• module:ej.menu.js

• module:ej.fileexplorer.js

• module:ej.checkbox.js

• module:ej.splitbutton.js

• module:ej.grid.edit.js

• module:ej.grid.filter.js

• module:ej.grid.selection.js

• module:ej.gridresize.js

• module:ej.grid.sort.js

• module:ej.grid.dragAndDrop.js

• module:ej.grid.common.js

• module:ej.grid.base.js

{:#members:ajaxaction}

Sets the URL of server side AJAX handling method that handles file operation like Read, Remove, Rename, Create, Upload, Download, Copy and Move in FileExplorer.

• ""

{% highlight html %}

{% endhighlight %}

{:#members:ajaxdatatype}

Specifies the data type of server side AJAX handling method.

• "json"

{% highlight html %}

{% endhighlight %}

{:#members:ajaxsettings}

By using ajaxSettings property, you can customize the AJAX configurations. Normally you can customize the following option in AJAX handling data, URL, type, async, contentType, dataType and success. For upload, download and getImage API, you can only customize URL.

• { read: {}, createFolder: {}, remove: {}, rename: {}, paste: {}, getDetails: {}, download: {}, upload: {}, getImage: {}, search: {}}

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [ajaxSettings]="ajaxSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { ajaxSettings: Object; constructor() { let ajaxJSONPActionHandler = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperationsCors"; this.ajaxSettings={ read: { url: ajaxJSONPActionHandler, dataType: "jsonp" } }; } }

{% endhighlight %}

{:#members:allowdraganddrop}

The FileExplorer allows to move the files from one folder to another folder of FileExplorer by using drag and drop option. Also it supports to upload a file by dragging it from windows explorer to the necessary folder of ejFileExplorer.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [allowDragAndDrop]="false" style="display:block">

{% endhighlight %}

{:#members:allowkeyboardnavigation}

Gets or sets a value that indicates whether to enable keyboard support for FileExplorer actions.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [allowKeyboardNavigation]="false" style="display:block">

{% endhighlight %}

{:#members:allowmultiselection}

The FileExplorer allows to select multiple files by enabling the allowMultiSelection property. You can perform multi selection by pressing the Ctrl key or Shift key.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [allowMultiSelection]="false" style="display:block">

{% endhighlight %}

{:#members:contextmenusettings}

By using the contextMenuSettings property, you can customize the ContextMenu in the FileExplorer control.

{:#members:contextmenusettings-items}

The items property is used to configure and group the required ContextMenu items in FileExplorer control.

• {% highlight javascript %} { navbar: ["NewFolder", "Upload", "|", "Delete", "Rename", "|", "Cut", "Copy", "Paste", "|", "Getinfo"], cwd: ["Refresh", "Paste","|", "SortBy", "|", "NewFolder", "Upload", "|", "Getinfo"], files: ["Open", "Download", "|", "Upload", "|", "Delete", "Rename", "|", "Cut", "Copy", "Paste", "|", "OpenFolderLocation", "Getinfo"] } {% endhighlight %}

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [contextMenuSettings]="contextMenuSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contextMenuSettings: Object; constructor() { this.contextMenuSettings = { // define the ContextMenu items items: { // removed the 'NewFolder' item from NavigationPane ContextMenu navbar: ['Upload', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|', 'Getinfo'], // added the custom ContextMenu item (View) to Current working directory ContextMenu cwd: ['Refresh', 'Paste', '|', 'SortBy', 'View', '|', 'NewFolder', 'Upload', '|', 'Getinfo'], // removed 'Upload' item from Selected files/ folder's ContextMenu files: ['Open', 'Download', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|', 'OpenFolderLocation', 'Getinfo'] } }; } }

{% endhighlight %}

{:#members:contextmenusettings-custommenufields}

The customMenuFields property is used to define custom functionality for custom ContextMenu item's which are defined in items property.

• []

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [contextMenuSettings]="contextMenuSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contextMenuSettings: Object; constructor() { this.contextMenuSettings = { // define the ContextMenu items items: { // removed the 'NewFolder' item from NavigationPane ContextMenu navbar: ['Upload', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|', 'Getinfo'], // added the custom ContextMenu item (View) to Current working directory ContextMenu cwd: ['Refresh', 'Paste', '|', 'SortBy', 'View', '|', 'NewFolder', 'Upload', '|', 'Getinfo'], // removed 'Upload' item from Selected files/ folder's ContextMenu files: ['Open', 'Download', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|', 'OpenFolderLocation', 'Getinfo'] }, // added the custom ContextMenu item's (View) functionality customMenuFields: [ { id: 'View', text: 'View by', spriteCssClass: 'custom-grid', child: [ { id: 'tile', text: 'Tile view', action: function (event) { let fileExplorerObj = $('#fileExplorer4').data('ejFileExplorer'); fileExplorerObj.option('layout', event.ID); } }, { id: 'grid', text: 'Grid view', action: function (event) { let fileExplorerObj = $('#fileExplorer4').data('ejFileExplorer'); fileExplorerObj.option('layout', event.ID); } }, { id: 'LargeIcons', text: 'Large icons view', action: function (event) { let fileExplorerObj = $('#fileExplorer4').data('ejFileExplorer'); fileExplorerObj.option('layout', event.ID); } }, ] }, ] }; } }

{% endhighlight %}

{:#members:cssclass}

Sets the root class for FileExplorer theme. This cssClass API allows to use custom skinning option for File Explorer control. By defining the root class by using this API, you have to include this root class in CSS.

• ""

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [cssClass]="customCss" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { customCss:string;
constructor() { this.customCss = "gradient-lime"; } }

{% endhighlight %}

{:#members:enablepersistence}

Specify the enablePersistence to FileExplorer to save the current model value in browser cookies for state maintains.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [enablePersistence]="true" style="display:block">

{% endhighlight %}

{:#members:enableresize}

Enables or disables the resize support in FileExplorer control.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [enableResize]="true" style="display:block">

{% endhighlight %}

{:#members:enablertl}

Enables or disables the Right to Left alignment support in FileExplorer control.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [enableRTL]="true" style="display:block">

{% endhighlight %}

{:#members:enablethumbnailcompress}

Enables or disables the thumbnail image compression option in FileExplorer control. By enabling this option, you can reduce the thumbnail image size while loading.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [enableThumbnailCompress]="true" style="display:block">

{% endhighlight %}

{:#members:filetypes}

Allows specified type of files only to display in FileExplorer control.

• "* . *"

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [fileTypes]=".png,.gif,.jpg,.jpeg,*.docx" style="display:block">

{% endhighlight %}

{:#members:filtersettings}

By using filterSettings property, you can customize the search functionality of the search bar in FileExplorer control.

{:#members:filtersettings-allowsearchontyping}

It allows to search the text given in search Textbox in every keyup event. When this property was set as false, searching will works only on Enter key and searchbar blur.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [filterSettings]="filterSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { filterSettings: Object;
constructor() { this.filterSettings = {allowSearchOnTyping: false}; } }

{% endhighlight %}

{:#members:filtersettings-casesensitivesearch}

Enables or disables to perform the filter operation with case sensitive.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [filterSettings]="filterSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { filterSettings: Object;
constructor() { this.filterSettings = {caseSensitiveSearch: false}; } }

{% endhighlight %}

{:#members:filtersettings-filtertype}

Sets the search filter type. There are several filter types available such as "startswith", "contains", "endswith". See filterType.

• ej.FileExplorer.filterType.Contains

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [filterSettings]="filterSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { filterSettings: Object;
constructor() { this.filterSettings = {filterType: "startswith"}; } }

{% endhighlight %}

{:#members:gridsettings}

By using the gridSettings property, you can customize the grid behavior in the FileExplorer control.

{:#members:gridsettings-allowresizing}

Allows to Resize the width of the columns by simply click and move the particular column header line.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [gridSettings]="gridSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { gridSettings: Object;
constructor() { this.gridSettings = {allowResizing:false}; } }

{% endhighlight %}

{:#members:gridsettings-allowsorting}

Gets or sets a value that indicates whether to enable the dynamic sorting behavior on grid data. Sorting can be done through clicking on particular column header.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [gridSettings]="gridSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { gridSettings: Object;
constructor() { this.gridSettings = {allowSorting:false}; } }

{% endhighlight %}

{:#members:gridsettings-columns}

Gets or sets an object that indicates to render the grid with specified columns. You can use this property same as the column property in Grid control.

• [{ field: "name", headerText: "Name", width: "30%" }, { field: "dateModified", headerText: "Date Modified", width: "30%" }, { field: "type", headerText: "Type", width: "15%" }, { field: "size", headerText: "Size", width: "12%", textAlign: "right", headerTextAlign: "left" }]

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [gridSettings]="gridSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { gridSettings: Object;
constructor() { this.gridSettings = {columns:[{ field: "name", headerText: "Name", width: 90 }, { field: "type", headerText: "Type", width: 95 }, { field: "size", headerText: "Size", width: 90 }]}; } }

{% endhighlight %}

{:#members:height}

Specifies the height of FileExplorer control.

• 400

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [height]="height" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { height: string;
constructor() { this.height = "450px"; } }

{% endhighlight %}

{:#members:isresponsive}

Enables or disables the responsive support for FileExplorer control during the window resizing time.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [height]="height" [width]="width" [isResponsive]="true" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { height:string; width:string; constructor(){ this.height="50%"; this.width="70%"; } }

{% endhighlight %}

{:#members:layout}

Sets the file view type. There are three view types available such as Grid, Tile and Large icons. See layoutType.

• ej.FileExplorer.layoutType.Grid

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [layout]="layout" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { layout:any; constructor(){ this.layout="tile"; } }

{% endhighlight %}

{:#members:locale}

Sets the culture in FileExplorer.

• "en-US"

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [locale]="locale" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { locale: string; constructor(){ this.locale="en-US"; } }

{% endhighlight %}

{:#members:maxheight}

Sets the maximum height of FileExplorer control.

• null

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [maxHeight]="maxHeight" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { maxHeight: number; constructor(){ this.maxHeight=500; } }

{% endhighlight %}

{:#members:maxwidth}

Sets the maximum width of FileExplorer control.

• null

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [maxWidth]="maxWidth" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { maxWidth: number; constructor(){ this.maxWidth=1000; } }

{% endhighlight %}

{:#members:minheight}

Sets the minimum height of FileExplorer control.

• "250px"

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [minHeight]="minHeight" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { minHeight: number; constructor(){ this.maxWidth=300; } }

{% endhighlight %}

{:#members:minwidth}

Sets the minimum width of FileExplorer control.

• "400px"

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [minWidth]="minWidth" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { minWidth: number; constructor(){ this.maxWidth=300; } }

{% endhighlight %}

{:#members:path}

The property path denotes the filesystem path that are to be explored. The path for the filesystem can be physical path or relative path, but it has to be relevant to where the Web API is hosted.

• ""

{% highlight html %}

{% endhighlight %}

{:#members:rootfoldername}

Sets the alias name of root folder name in FileExplorer. It is used to replace the actual root folder name in FileExplorer.

• ""

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [rootFolderName]="rootFolderName" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { rootFolderName: string; constructor(){ this.rootFolderName="This PC"; // The name to replace your actual root folder name(FileBrowser). } }

{% endhighlight %}

{:#members:selectedfolder}

The selectedFolder is used to select the specified folder of FileExplorer control.

• ""

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [selectedFolder]="selectedFolder" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { selectedFolder: string; constructor(){ this.selectedFolder="http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/Food"; } }

{% endhighlight %}

{:#members:selecteditems}

The selectedItems is used to select the specified items (file, folder) of FileExplorer control.

• ""

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [selectedItems]="selectedItems" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { selectedItems: String[]; constructor(){ this.selectedItems= ["Food", "Nature"]; } }

{% endhighlight %}

{:#members:showcheckbox}

Enables or disables the checkbox option in FileExplorer control.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [showCheckbox]="false" style="display:block">

{% endhighlight %}

{:#members:showcontextmenu}

Enables or disables the context menu option in FileExplorer control.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [showContextMenu]="false" style="display:block">

{% endhighlight %}

{:#members:showfooter}

Enables or disables the footer in FileExplorer control. The footer element displays the details of the current selected files and folders. And also the footer having the switcher to change the layout view.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [showFooter]="false" style="display:block">

{% endhighlight %}

{:#members:showroundedcorner}

FileExplorer control is displayed with rounded corner when this property is set to true.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [showRoundedCorner]="true" style="display:block">

{% endhighlight %}

{:#members:showthumbnail}

FileExplorer control is rendered with thumbnail preview of images in Tile and LargeIcons layout when this property set to true.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [showThumbnail]="false" style="display:block">

{% endhighlight %}

{:#members:showtoolbar}

Shows or disables the toolbar in FileExplorer control.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [showToolbar]="false" style="display:block">

{% endhighlight %}

{:#members:shownavigationpane}

Enables or disables the navigation pane in FileExplorer control. The navigation pane contains a tree view element that displays all the folders from the filesystem in a hierarchical manner. This is useful to a quick navigation of any folder in the filesystem.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [showNavigationPane]="false" style="display:block">

{% endhighlight %}

{:#members:tools}

The tools property is used to configure and group required toolbar items in FileExplorer control.

• { creation: ["NewFolder"], navigation: ["Back", "Forward", "Upward"], addressBar: ["Addressbar"], editing: ["Refresh", "Upload", "Delete", "Rename", "Download"], copyPaste: ["Cut", "Copy", "Paste"], getProperties: ["Details"], searchBar: ["Searchbar"], layout: ["Layout"], sortBy: ["SortBy"]}

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [tools]="tools" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { tools: Object; constructor() { // defines the tool items for customTool category this.tools= { customTool: [{ creation:["NewFolder", "Open"], navigation: ["Back", "Forward", "Upward"], addressBar: ["Addressbar"], editing: ["Refresh", "Upload", "Delete", "Rename", "Download"], copyPaste: ["Cut", "Copy", "Paste"], getProperties: ["Details"], searchBar: ["Searchbar"] }] }; } }

{% endhighlight %}

{:#members:toolslist}

The toolsList property is used to arrange the toolbar items in the FileExplorer control.

• ["layout", "creation", "navigation", "addressBar", "editing", "copyPaste", "sortBy", "getProperties", "searchBar"]

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [toolsList]="toolsList" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { toolsList: Object; constructor() { // defines the tool items for customTool category this.toolsList= ["navigation", "creation", "addressBar", "editing", "copyPaste", "getProperties", "searchBar"]; } }

{% endhighlight %}

{:#members:uploadsettings}

Gets or sets an object that indicates whether to customize the upload behavior in the FileExplorer.

{:#members:uploadsettings-maxfilesize}

Specifies the maximum file size allowed to upload. It accepts the value in bytes.

• 31457280

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [uploadSettings]="uploadSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { uploadSettings: Object; constructor() { // defines the tool items for customTool category this.uploadSettings= {maxFileSize:10000}; } }

{% endhighlight %}

{:#members:uploadsettings-allowmultiplefile}

Enables or disables the multiple files upload. When it is enabled, you can upload multiple files at a time and when disabled, you can upload only one file at a time.

• true

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [uploadSettings]="uploadSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { uploadSettings: Object; constructor() { // defines the tool items for customTool category this.uploadSettings= {allowMultipleFile:false}; } }

{% endhighlight %}

{:#members:uploadsettings-autoupload}

Enables or disables the auto upload option while uploading files in FileExplorer control.

• false

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [uploadSettings]="uploadSettings" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { uploadSettings: Object; constructor() { // defines the tool items for customTool category this.uploadSettings= {autoUpload:true}; } }

{% endhighlight %}

{:#members:width}

Specifies the width of FileExplorer control.

• 850

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" [width]="width" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { width: number; constructor() { // defines the tool items for customTool category this.width= 800; } }

{% endhighlight %}

{:#methods:adjustsize}

Refresh the size of FileExplorer control.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create FileExplorer instance var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); fileExplorerObj.adjustSize(); // refresh the size of file explorer

{% endhighlight %}

{:#methods:disablemenuitem}

Disable the particular context menu item.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create FileExplorer instance var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); fileExplorerObj.disableMenuItem("Upload"); // disable upload option

{% endhighlight %}

{:#methods:disabletoolbaritem}

Disable the particular toolbar item.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create FileExplorer instance var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); fileExplorerObj.disableToolbarItem("Searchbar"); // disable search bar

{% endhighlight %}

{:#methods:enablemenuitem}

Enable the particular context menu item.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create FileExplorer instance var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); fileExplorerObj.enableMenuItem("Upload"); // enable upload option in context menu

{% endhighlight %}

{:#methods:enabletoolbaritem}

Enable the particular toolbar item

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create FileExplorer instance var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); fileExplorerObj.enableToolbarItem("Searchbar"); // enable search bar

{% endhighlight %}

{:#methods:refresh}

Refresh the content of the selected folder in FileExplorer control.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create FileExplorer instance var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); fileExplorerObj.refresh(); // refresh the content of selected folder

{% endhighlight %}

{:#methods:removetoolbaritem}

Remove the particular toolbar item.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

// Create FileExplorer instance var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer"); fileExplorerObj.removeToolbarItem("Searchbar"); // remove search bar

{% endhighlight %}

{:#events:beforeajaxrequest}

Fires before the AJAX request is performed.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeAjaxRequest)="onBeforeAjaxRequest($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onBeforeAjaxRequest(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:beforedownload}

Fires before downloading the files.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeDownload)="onBeforeDownload($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onBeforeDownload(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:beforegetimage}

Fires before getting a requested image from server. Also this event will be triggered when you have enabled thumbnail image compression option in FileExplorer. Using this event, you can customize the image compression size.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeGetImage)="onBeforeGetImage($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onBeforeGetImage(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:beforeopen}

Fires before files or folders open.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeOpen)="onBeforeOpen($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onBeforeOpen(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:beforeupload}

Fires before uploading the files.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (beforeUpload)="onBeforeUpload($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onBeforeUpload(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:create}

Fires when FileExplorer control was created

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (create)="onCreate($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onCreate(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:copy}

Fires when file or folder is copied successfully.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (copy)="onCopy($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onCopy(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:createfolder}

Fires when new folder is created successfully in file system.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (createFolder)="onCreateFolder($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onCreateFolder(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:cut}

Fires when file or folder is cut successfully.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (cut)="onCut($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onCut(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:destroy}

Fires when the FileExplorer is destroyed successfully.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (destroy)="onDestroy($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onDestroy(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:dragstart}

Fires when the files or directory has been started to drag over on the FileExplorer

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (dragStart)="onDragStart($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onDragStart(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:drag}

Fires when the files or directory is dragging over on the FileExplorer.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (drag)="onDrag($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onDrag(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:dragstop}

Fires when the files or directory has been stopped to drag over on FileExplorer

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (dragStop)="onDragStop($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onDragStop(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:drop}

Fires when the files or directory is dropped to the target folder of FileExplorer

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (drop)="onDrop($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onDrop(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:getimage}

Fires after loading the requested image from server. Using this event, you can get the details of loaded image.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (getImage)="onGetImage($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onGetImage(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:keydown}

Fires when keydown in FileExplorer control.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (keydown)="onKeydown($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onKeydown(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:layoutchange}

Fires when the file view type is changed.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (layoutChange)="onLayoutChange($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onLayoutChange(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:menubeforeopen}

Fires when before the ContextMenu opening.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (menuBeforeOpen)="menuBeforeOpen($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } menuBeforeOpen(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:menuclick}

Fires when click the ContextMenu item.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (menuClick)="onMenuClick($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onMenuClick(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:menuopen}

Fires when ContextMenu is successfully opened.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (menuOpen)="onMenuOpen($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onMenuOpen(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:open}

Fires when files are successfully opened.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (open)="onOpen($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onOpen(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:paste}

Fires when a file or folder is pasted successfully.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (paste)="onPaste($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onPaste(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:remove}

Fires when file or folder is deleted successfully.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (remove)="onRemove($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onRemove(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:resize}

Fires when resizing is performed for FileExplorer.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (resize)="onResize($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onResize(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:resizestart}

Fires when resizing is started for FileExplorer.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (resizeStart)="onResizeStart($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onResizeStart(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:resizestop}

Fires this event when the resizing is stopped for FileExplorer.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (resizeStop)="onResizeStop($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onResizeStop(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:select}

Fires when the items from grid view or tile view of FileExplorer control is selected.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (select)="onSelect($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onSelect(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:templaterefresh}

Triggered when refresh the template column elements in the grid view of FileExplorer control.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (templateRefresh)="onTemplateRefresh($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onTemplateRefresh(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:unselect}

Fires when the items from grid view or tile view or large icons view of FileExplorer control is unselected.

{% highlight html %}

<ej-fileexplorer id="fileExplorer" path= "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/" ajaxAction="http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations" (unselect)="onUnselect($event)" style="display:block">

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onUnselect(e: any){ // Your code here }

}

{% endhighlight %}