Represents the Essential JS 2 VueJS FileManager Component.
<ejs-filemanager showThumbnail='false'></ejs-filemanager>Specifies the AJAX settings of the file manager.
Defaults to { getImageUrl: null; url: null; uploadUrl: null; downloadUrl: null;}
boolean
Enables or disables drag-and-drop of files.
Defaults to false
boolean
Enables or disables the multiple files selection of the file manager.
Defaults to true
Specifies the context menu settings of the file manager.
Defaults to { file: [‘Open’,’|’, ‘Cut’, ‘Copy’, ’|’, ‘Delete’, ‘Rename’, ’|’, ‘Details’], folder: [‘Open’,’|’, ‘Cut’, ‘Copy’, ‘Paste’, ’|’, ‘Delete’, ‘Rename’, ’|’, ‘Details’], layout: [‘SortBy’, ‘View’, ‘Refresh’, ’|’, ‘Paste’, ’|’, ‘NewFolder’, ‘Upload’, ’|’, ‘Details’, ’|’, ‘SelectAll’], visible: true,}
string
Specifies the root CSS class of the file manager that allows you to customize the appearance by overriding the styles.
Defaults to ”
Specifies the details view settings of the file manager.
Defaults to {columns: [{field: ‘name’, headerText: ‘Name’, minWidth: 120, template: ’${name}‘,customAttributes: { class: ‘e-fe-grid-name’}}, { field: ’fmmodified’, headerText: ‘DateModified’, type: ‘dateTime’,format: ‘MMMM dd, yyyy HH:mm’, minWidth: 120, width: ‘190’ }, { field: ‘size’, headerText: ‘Size’, minWidth: 90, width: ‘110’,template: ’${size}’ }]}
boolean
Defines whether to allow the cross-scripting site or not.
Defaults to true
boolean
Enables or disables persisting component’s state between page reloads. If enabled, the following APIs will persist:
view: Represents the previous view of the file manager.path: Represents the previous path of the file manager.selectedItems: Represents the previous selected items in the file manager.Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Gets or sets a value that enables/disables the virtualization feature of the File Manager. When enabled, the File Manager will only load a subset of files and folders based on the size of the view port, with the rest being loaded dynamically as the user scrolls vertically through the list. This can improve performance when dealing with a large number of files and folders, as it reduces the initial load time and memory usage.
Defaults to false
string | number
Specifies the height of the file manager.
Defaults to ‘400px’
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Specifies the navigationpane settings of the file manager.
Defaults to { maxWidth: ‘650px’, minWidth: ‘240px’, visible: true, sortOrder: ‘None’}
string
Specifies the current path of the file manager.
Defaults to ’/’
HTMLElement | string
Specifies the target element in which the File Manager’s dialog will be displayed. The default value is null, which refers to the File Manager element.
Defaults to null
string
Specifies the root folder alias name in file manager
Defaults to null
Specifies the search settings of the file manager.
Defaults to { allowSearchOnTyping: true, filterType: ‘contains’, ignoreCase: true}
string[]
Specifies the selected folders and files name of the file manager.
Defaults to []
boolean
Shows or hides the file extension in file manager.
Defaults to true
boolean
Shows or hides the files and folders that are marked as hidden.
Defaults to false
boolean
Gets or sets a boolean value that determines whether to display checkboxes in the file manager. If enabled, checkboxes are shown for files or folders on hover.
Defaults to true
boolean
Shows or hides the thumbnail images in largeicons view.
Defaults to true
string
Specifies the field name being used as the sorting criteria to sort the files of the file manager component.
Defaults to ‘name’
Specifies a value that indicates whether the folders and files are sorted in the ascending or descending order,
or they are not sorted at all. The available types of sort orders are,
None - Indicates that the folders and files are not sorted.
Ascending - Indicates that the folders and files are sorted in the ascending order.
Descending - Indicates that the folders and files are sorted in the descending order.
Defaults to ‘Ascending’
An array of items that are used to configure File Manager toolbar items.
Defaults to []
Specifies the group of items aligned horizontally in the toolbar.
Defaults to { items: [‘NewFolder’, ‘Upload’, ‘Cut’, ‘Copy’, ‘Paste’, ‘Delete’, ‘Download’, ‘Rename’, ‘SortBy’, ‘Refresh’, ‘Selection’, ‘View’, ‘Details’], visible: true}
Specifies the upload settings for the file manager.
Defaults to { autoUpload: true, minFileSize: 0, maxFileSize: 30000000, allowedExtensions: ”, autoClose: false, directoryUpload: false}
Specifies the initial view of the file manager. With the help of this property, initial view can be changed to details or largeicons view. The available views are:
LargeIconsDetailsDefaults to ‘LargeIcons’
string | number
Specifies the width of the file manager.
Defaults to ‘100%’
Deselects the currently selected folders and files in current path.
Returns void
Creates a new folder in file manager.
| Parameter | Type | Description |
|---|---|---|
| name (optional) | string |
– Specifies the name of new folder in current path. If it is not specified, then the default new folder dialog will be opened. |
Returns void
Deletes the folders or files from the given unique identifiers.
| Parameter | Type | Description |
|---|---|---|
| ids (optional) | string[] |
Specifies the name of folders or files in current path. If you want to delete the nested level folders or files, then specify the filter path along with name of the folders or files when performing the search or custom filtering. For ID based file provider, specify the unique identifier of folders or files. If it is not specified, then delete confirmation dialog will be opened for selected item. |
Returns void
Triggers when the component is destroyed.
Returns void
Disables the specified context menu items in file manager. This method is used only in the menuOpen event.
| Parameter | Type | Description |
|---|---|---|
| items | string[] |
Specifies an array of items to be disabled. |
Returns void
Disables the specified toolbar items of the file manager.
| Parameter | Type | Description |
|---|---|---|
| items | string[] |
Specifies an array of items to be disabled. |
Returns void
Downloads the folders or files from the given unique identifiers.
| Parameter | Type | Description |
|---|---|---|
| ids (optional) | string[] |
Specifies the name of folders or files in current path. If you want to download the nested level folders or files, then specify the filter path along with name of the folders or files when performing search or custom filtering. For ID based file provider, specify the unique identifier of folders or files. If it is not specified, then the selected items will be downloaded. |
Returns void
Enables the specified toolbar items of the file manager.
| Parameter | Type | Description |
|---|---|---|
| items | string[] |
Specifies an array of items to be enabled. |
Returns void
Display the custom filtering files in file manager.
| Parameter | Type | Description |
|---|---|---|
| filterData (optional) | Object |
Specifies the custom filter details along with custom file action name, which needs to be sent to the server side. If you do not specify the details, then default action name will be filter. |
Returns void
Returns the index position of given current context menu item in file manager.
| Parameter | Type | Description |
|---|---|---|
| item | string |
Specifies an item to get the index position. |
Returns number
Gets the details of the selected files in the file manager.
Returns Object[]
Returns the index position of given toolbar item in file manager.
| Parameter | Type | Description |
|---|---|---|
| item | string |
Specifies an item to get the index position. |
Returns number
Opens the corresponding file or folder from the given unique identifier.
| Parameter | Type | Description |
|---|---|---|
| id | string |
Specifies the name of folder or file in current path. If you want to open the nested level folder or file, then specify the filter path along with name of the folder or file when performing search or custom filtering. For ID based file provider, specify the unique identifier of folder or file. |
Returns void
Refreshes the folder files of the file manager.
Returns void
Refreshes the layout of the file manager.
Returns void
Renames the file or folder with given new name in file manager.
| Parameter | Type | Description |
|---|---|---|
| id (optional) | string |
Specifies the name of folder or file in current path. If you want to rename the nested level folder or file, then specify the filter path along with name of the folder or file when performing search or custom filtering. For ID based file provider, specify the unique identifier of folder or file. If it is not specified, then rename dialog will be opened for selected item. |
| name (optional) | string |
– Specifies the new name of the file or folder in current path. If it is not specified, then rename dialog will be opened for given identifier. |
Returns void
Selects the entire folders and files in current path.
Returns void
Opens the upload dialog in file manager.
Returns void
EmitType<BeforeDownloadEventArgs>
Triggers before sending the download request to the server.
EmitType<BeforeImageLoadEventArgs>
Triggers before sending the getImage request to the server.
EmitType<BeforePopupOpenCloseEventArgs>
Triggers before the dialog is closed.
EmitType<BeforePopupOpenCloseEventArgs>
Triggers before the dialog is opened.
Triggers before sending the AJAX request to the server.
EmitType<Object>
Triggers when the file manager component is created.
EmitType<Object>
Triggers when the file manager component is destroyed.
Triggers when the AJAX request is failed.
Triggers when the file/folder dragging is started.
Triggers when the file/folder is about to be dropped at the target.
Triggers while dragging the file/folder.
Triggers when the file/folder is dropped.
Triggers before the file/folder is rendered.
Triggers before the file/folder is opened.
Triggers when the file/folder is selected/unselected.
EmitType<FileSelectionEventArgs>
Triggers before the file/folder is selected.
Triggers when the context menu item is clicked.
Triggers before the context menu is opened.
EmitType<PopupOpenCloseEventArgs>
Triggers when the dialog is closed.
EmitType<PopupOpenCloseEventArgs>
Triggers when the dialog is opened.
Triggers when the AJAX request is success.
EmitType<ToolbarClickEventArgs>
Triggers when the toolbar item is clicked.
EmitType<ToolbarCreateEventArgs>
Triggers before creating the toolbar.
EmitType<UploadListCreateArgs>
Triggers before rendering each file item in upload dialog box.