The toolbar element have number of tools, and each tool can be configured.
The toolbar has the list of items to perform various operations and it is grouped into some categorizes.
|
Tool name
|
Description
|
|
Layout
|
In file explorer, files have been displayed in 3 types of views “Grid”, “Tile”, and “Large Icons”. Using this tool, you can change the view type from one to another.
|
NewFolder
|
Also createFolder
event will be triggered when new folder is created successfully in the file system.
|
</tr>
Back
|
</tr>
|
Forward
|
</tr>
|
Upward
|
</tr>
|
Address bar
|
</tr>
|
Refresh
|
</tr>
|
Upload
|
|
</tr>
Delete
|
It deletes the currently selected file or folder. The delete icon will be in enable state, when you select any file or folder.
If you select multiple files, it deletes all the selected items.
|
Rename
|
This is used to rename the currently selected file or folder. The rename icon will be in enable state, when you select any file or folder.
Even if you select multiple files, it renames the last selected file only.
|
Download
|
It downloads the selected files. The download icon is enable state if you select any file or folder.
The beforeDownload
event will be triggered before the files are downloaded.
If you select multiple files, it downloads all the files in a zip format.
|
</tr>
Cut
|
It makes the copy of the selected files or folders into the clipboard. When the user paste the files in any location, the files are removed from the source location.
The cut
event will be triggered when files or folders are removed from the source.
|
</tr>
Copy
|
It makes the copy of the selected files or folders into the clipboard. When the user paste the files, the copy of the files are pasted in the target location.
The copy
event will be triggered when file or folder is copied.
|
</tr>
Paste
|
It pastes the files from the clipboard into the currently selected folder.
Note: Only when the files are copied into the clipboard it is enabled.
The paste
event will be triggered when file or folder is pasted.
|
</tr>
Details
|
It displays the details of the currently selected file or folder.
|
Search bar
|
</tr>
|
Sort by
|
</tr>
</table>
## Toolbar visibility
The visibility of the toolbar can be customized through the “[ShowToolbar](http://help.syncfusion.com/js/api/ejfileexplorer#members:showtoolbar)” property. By disabling this property you can remove the toolbar from the file explorer. Also you can remove the particular toolbar item by using [removeToolbarItem](https://help.syncfusion.com/api/js/ejfileexplorer#methods:removetoolbaritem) method.
In the view page, add FileExplorer and specify “ShowToolbar” as false.
CSHTML
<ej-file-explorer id="default" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" width="100%" is-responsive="true" show-toolbar="false" >
<e-file-ajax-settings>
<e-download url="/FileExplorer/Download{0}"></e-download>
<e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
<e-upload url="/FileExplorer/Upload{0}"></e-upload>
</e-file-ajax-settings>
</ej-file-explorer>
## Toolbar configuration
From the list of available items, you can configure and group your required toolbar items only through the “[Tools](https://help.syncfusion.com/js/api/ejfileexplorer#members:tools)” property. And also, you can arrange the toolbar items by the “[ToolsList](http://help.syncfusion.com/js/api/ejfileexplorer#members:toolslist)” property.
CSHTML
<ej-file-explorer id="default" tools-list="@(new List<string>() {"creation","Navigation","addressBar", "copyPaste", "searchBar"})" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" width="100%" is-responsive="true" >
<e-file-tools creation="@(new List<string>() {"NewFolder"})" address-bar="@(new List<string>() {"Addressbar"})" copy-paste="@(new List<string>() {"Cut", "Copy","Paste"})" navigation="@(new List<string>() { "Back","Forward", "Upward"})" search-bar="@(new List<string>() {"Searchbar"})">
</e-file-tools>
<e-file-ajax-settings>
<e-download url="/FileExplorer/Download{0}"></e-download>
<e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
<e-upload url="/FileExplorer/Upload{0}"></e-upload>
</e-file-ajax-settings>
</ej-file-explorer>
## Search bar
The Search bar can be customize through the “[FilterSettings](https://help.syncfusion.com/js/api/ejfileexplorer#members:filtersettings)” property. By default, the search does not consider the case sensitivity, and the search work is based on the “[FilterType](https://help.syncfusion.com/js/api/ejfileexplorer#members:filtersettings-filtertype)”.
The file explorer allows the following filter types in the search functionality.
* “FilterOperator.StartsWith”: Supports to search text with starts with
* “FilterOperator.Contains”: Supports to search text with contains with
* “FilterOperator.EndsWith”: Supports to search text with ends with
In the view page, you can configure the filter type with enabling case sensitivity and filter type like in the following:
CSHTML
<ej-file-explorer id="default" path="wwwroot/images/FileExplorer" ajax-action="@Url.Content("FileActionDefault")" width="100%" is-responsive="true" >
<e-file-filter-settings case-sensitive-search ="true" filter-type="EndsWith" />
<e-file-ajax-settings>
<e-download url="/FileExplorer/Download{0}"></e-download>
<e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
<e-upload url="/FileExplorer/Upload{0}"></e-upload>
</e-file-ajax-settings>
</ej-file-explorer>
## Custom Tool in Toolbar
From the toolbar items, you can see the list of built-in tools to perform the operations. Along with this built-in tools, you can add your custom tool with the custom functionality.
You can find an online demo sample of file explorer with custom tool from [here](http://aspnetcore.syncfusion.com/fileexplorer/customtool).
In the view page, add FileExplorer and specify custom tool as shown in the following:
CSHTML
<ej-file-explorer id="custom" path="wwwroot/images/FileExplorer" layout="Tile" ajax-action="@Url.Content("FileActionDefault")" width="100%" is-responsive="true" tools-list='@new List<string>(){"creation","navigation","addressBar", "copyPaste", "searchBar", "customTool"}'>
<e-file-ajax-settings>
<e-download url="/FileExplorer/Download{0}"></e-download>
<e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
<e-upload url="/FileExplorer/Upload{0}"></e-upload>
</e-file-ajax-settings>
<e-file-tools>
<e-file-custom-tools>
<e-file-custom-tool name="help" tooltip="help" css="e-fileExplorer-toolbar-icon Help" action="dialogOpen">
</e-file-custom-tool>
</e-file-custom-tools>
</e-file-tools>
</ej-file-explorer>
<ej-dialog id="helpDialog" title="FileExplorer Help" enable-resize="false" enable-modal="true" show-on-init="false" width="350" max-height="100" css-class="e-fe-dialog">
<e-content-template>
<div class="text-content">
<div class="header-content">Need assistance?</div>
<div class="header-content">Our help document assists you to know more about FileExplorer control.</div>
<div class="header-content">
Please refer -> <a href="https://help.syncfusion.com/aspnetmvc/fileexplorer/overview" target="_blank">Help Document</a>
</div>
</div>
</e-content-template>
</ej-dialog>
JAVASCRIPT
<script>
//click handler of custom tool
function dialogOpen() {
alert("custom tool item clicked");
}
</script>
CSS
@*Define the CSS that needs to apply for the custom tool.*@
<style class="cssStyles">
.e-fileExplorer-toolbar-icon {
height: 22px;
width: 22px;
font-family: 'ej-webfont';
font-size: 18px;
margin-top: 2px;
text-align: center;
}
.e-fileExplorer-toolbar-icon.Help:before {
content: "\e72b";
}
</style>
## Enable/Disable the Toolbar item
Each toolbar item can be enabled or disabled through the following client-side public methods.
* [enableToolbarItem](https://help.syncfusion.com/js/api/ejfileexplorer#methods:enabletoolbaritem)
* [disableToolbarItem](https://help.syncfusion.com/js/api/ejfileexplorer#methods:disabletoolbaritem)
These methods accepts the tool name as the parameter. It also allows the parameter as tool item index or the jQuery object of the tool item.
JAVASCRIPT
$(function () {
var fileExpObj = $("#fileExplorer").data("ejFileExplorer");
// this disables the NewFolder item
fileExpObj.disableToolbarItem("NewFolder");
// this disables the Layout item (since index of Layout is 0)
fileExpObj.disableToolbarItem(0);
// this enables the NewFolder item
fileExpObj.enableToolbarItem("NewFolder");
});
### Enable / Disable the custom added tool in Toolbar Item
If you want to enable / disable the custom added tool in toolbar, you need to pass the corresponding li elements of custom added tool in [enableToolbarItem](https://help.syncfusion.com/api/js/ejfileexplorer#methods:enabletoolbaritem) / [disableToolbarItem](https://help.syncfusion.com/api/js/ejfileexplorer#methods:disabletoolbaritem) method of FileExplorer. Since we have consider this custom tool as a object type.
JAVASCRIPT
var fileExpObj = $("#fileExplorer").data("ejFileExplorer");
//tool is a cssClass of FileExplorer
// this disables the custom tool item
var li = $(".tool").find(".Help").closest('li');
fileExpObj.disableToolbarItem(li);
// this enables the custom tool item
fileExpObj.enableToolbarItem(li);
## Customizing the Upload Functionality
The file explorer helps you to upload the file using the “[Upload](https://help.syncfusion.com/js/uploadbox/overview#)” component. File upload can be done through the toolbar item or context menu item. The “[UploadSettings](https://help.syncfusion.com/js/api/ejfileexplorer#members:uploadsettings)” property is used to configure the upload functionalities.
This property has the following sub properties with the default values:
**AllowMultipleFile**: This property is used to control the behavior of multiple files upload and this is enabled by default, so you can upload multiple files at a time. If you disable this “AllowMultipleFile” property, you can upload only one file at a time.
**MaxFileSize**: The property limits the maximum file size to upload. It accepts the value in bytes.
**AutoUpload**: When you enable this property, the upload action is performed automatically after selecting the files. When you disable this property, it shows a confirmation dialog with the selected file details and perform the upload action by pressing the “upload” button.
During upload process following events will be triggered, beforeUploadSend
, beforeUploadDialogOpen
, beforeUpload
, uploadError
, uploadSuccess
and uploadComplete
. You can customize the upload settings with these events.
In the view page, add file explorer and specify the upload settings as shown in the following:
CSHTML
<ej-file-explorer id="custom" path="wwwroot/images/FileExplorer" layout="Tile" ajax-action="@Url.Content("FileActionDefault")" width="100%" is-responsive="true">
<e-file-upload-settings allow-multiple-file="false" auto-upload="true" />
<e-file-ajax-settings>
<e-download url="/FileExplorer/Download{0}"></e-download>
<e-get-image url="/FileExplorer/GetImage{0}"></e-get-image>
<e-upload url="/FileExplorer/Upload{0}"></e-upload>
</e-file-ajax-settings>
</ej-file-explorer>
|