FileManagerComponent

23 Sep 202515 minutes to read

Represents the Essential JS 2 Angular FileManager Component.

<ejs-filemanager showThumbnail='false'></ejs-filemanager>

Properties

ajaxSettings AjaxSettingsModel

Specifies the AJAX settings of the file manager.

Defaults to { getImageUrl: null; url: null; uploadUrl: null; downloadUrl: null;}

allowDragAndDrop boolean

Enables or disables drag-and-drop of files.

Defaults to false

allowMultiSelection boolean

Enables or disables the multiple files selection of the file manager.

Defaults to true

contextMenuSettings ContextMenuSettingsModel

Specifies the context menu settings of the file manager.

cssClass string

Specifies the root CSS class of the file manager that allows you to customize the appearance by overriding the styles.

Defaults to ’’

detailsViewSettings DetailsViewSettingsModel

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: ‘_fm_modified’, headerText: ‘DateModified’, type: ‘dateTime’,format: ‘MMMM dd, yyyy HH:mm’, minWidth: 120, width: ‘190’ }, { field: ‘size’, headerText: ‘Size’, minWidth: 90, width: ‘110’,template: ‘${size}’ }]}

enableHtmlSanitizer boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence boolean

Enables or disables persisting component’s state between page reloads. If enabled, the following APIs will persist:

1. view: Represents the previous view of the file manager.
2. path: Represents the previous path of the file manager.
3. selectedItems: Represents the previous selected items in the file manager.

Defaults to false

enableRangeSelection boolean

Gets or sets a value that indicates whether the File Manager allows multiple items selection with mouse dragging.
Set this property to true to allow users to select multiple items with mouse drag as like file explorer. Hover over
the files or folders and drag the mouse to select the required items.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableVirtualization 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

fileSystemData { : }[]

Specifies the array of data to populate folders/files in the File Manager.
The mandatory fields to be included in the JSON data are defined in fileData interface.
This interface can be extended to add additional fields as required.

Defaults to []

height string|number

Specifies the height of the file manager.

Defaults to ‘400px’

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

navigationPaneSettings NavigationPaneSettingsModel

Specifies the navigationpane settings of the file manager.

Defaults to { maxWidth: ‘650px’, minWidth: ‘240px’, visible: true, sortOrder: ‘None’}

path string

Specifies the current path of the file manager.

Defaults to ’/’

popupTarget 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

rootAliasName string

Specifies the root folder alias name in file manager

Defaults to null

searchSettings SearchSettingsModel

Specifies the search settings of the file manager.

Defaults to { allowSearchOnTyping: true, filterType: ‘contains’, ignoreCase: true}

selectedItems string[]

Specifies the selected folders and files name of the file manager.

Defaults to []

showFileExtension boolean

Shows or hides the file extension in file manager.

Defaults to true

showHiddenItems boolean

Determines whether to show or hide hidden files and folders.
This is applicable only for storage systems that support attributes for controlling the visibility of data, including physical file directories and custom flat data handlers.

Defaults to false

showItemCheckBoxes 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

showThumbnail boolean

Shows or hides the thumbnail images in largeicons view.

Defaults to true

sortBy string

Specifies the field name being used as the sorting criteria to sort the files of the file manager component.

Defaults to ‘name’

sortComparer SortComparer|string

Defines the custom sorting function.
The sort comparer function has the same functionality like
Array.sort sort comparer.
This can be used to customize the default sorting functionalities with required comparison values.

Defaults to null

sortOrder SortOrder

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’

toolbarItems ToolbarItemModel[]

An array of items that are used to configure File Manager toolbar items.

Defaults to []

toolbarSettings ToolbarSettingsModel

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}

uploadSettings UploadSettingsModel

Specifies the upload settings for the file manager.

Defaults to { autoUpload: true, minFileSize: 0, maxFileSize: 30000000, allowedExtensions: ‘’, autoClose: false, directoryUpload: false}

view ViewType

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:

• LargeIcons
• Details

Defaults to ‘LargeIcons’

width string|number

Specifies the width of the file manager.

Defaults to ‘100%’

Methods

clearSelection

Deselects the currently selected folders and files in current path.

Returns void

closeDialog

Specifies the method which must be invoked to programmatically close the dialog popup in the file manager.

Returns void

createFolder

Creates a new folder in file manager.

Returns void

deleteFiles

Deletes the folders or files from the given unique identifiers.

Returns void

destroy

Triggers when the component is destroyed.

Returns void

disableMenuItems

Disables the specified context menu items in file manager. This method is used only in the menuOpen event.

Returns void

disableToolbarItems

Disables the specified toolbar items of the file manager.

Returns void

downloadFiles

Downloads the folders or files from the given unique identifiers.

Returns void

enableMenuItems

Enables the specified menu items of the file manager.

Returns void

enableToolbarItems

Enables the specified toolbar items of the file manager.

Returns void

filterFiles

Display the custom filtering files in file manager.

Returns void

getMenuItemIndex

Returns the index position of given current context menu item in file manager.

Returns number

getSelectedFiles

Gets the details of the selected files in the file manager.

Returns Object[]

getToolbarItemIndex

Returns the index position of given toolbar item in file manager.

Returns number

openFile

Opens the corresponding file or folder from the given unique identifier.

Returns void

refreshFiles

Refreshes the folder files of the file manager.

Returns void

refreshLayout

Refreshes the layout of the file manager.

Returns void

renameFile

Renames the file or folder with given new name in file manager.

Returns void

selectAll

Selects the entire folders and files in current path.

Returns void

traverseBackward

Specifies the method that must be invoked to traverse the path backwards in the file manager.

Returns void

uploadFiles

Opens the upload dialog in file manager.

Returns void

Events

beforeDelete EmitType<DeleteEventArgs>

This event is triggered before the deletion of a file or folder occurs. It can be utilized to prevent the deletion of specific files or folders. Any actions, such as displaying a spinner for deletion, can be implemented here.

beforeDownload EmitType<BeforeDownloadEventArgs>

Triggers before sending the download request to the server.

beforeFolderCreate EmitType<FolderCreateEventArgs>

This event is triggered before a folder is created. It allows for the restriction of folder creation based on the application’s use case.

beforeImageLoad EmitType<BeforeImageLoadEventArgs>

Triggers before sending the getImage request to the server.

beforeMove EmitType<MoveEventArgs>

This event is triggered when a file or folder begins to move from its current path through a copy/cut and paste action.

beforePopupClose EmitType<BeforePopupOpenCloseEventArgs>

Triggers before the dialog is closed.

beforePopupOpen EmitType<BeforePopupOpenCloseEventArgs>

Triggers before the dialog is opened.

beforeRename EmitType<RenameEventArgs>

This event is triggered when a file or folder is about to be renamed. It allows for the restriction of the rename action for specific folders or files by utilizing the cancel option.

beforeSend EmitType<BeforeSendEventArgs>

Triggers before sending the AJAX request to the server.

created EmitType<Object>

Triggers when the file manager component is created.

delete EmitType<DeleteEventArgs>

This event is triggered after the file or folder is deleted successfully. The deleted file or folder details can be retrieved here. Additionally, custom elements’ visibility can be managed here based on the application’s use case.

destroyed EmitType<Object>

Triggers when the file manager component is destroyed.

failure EmitType<FailureEventArgs>

Triggers when the AJAX request is failed.

fileDragStart EmitType<FileDragEventArgs>

Triggers when the file/folder dragging is started.

fileDragStop EmitType<FileDragEventArgs>

Triggers when the file/folder is about to be dropped at the target.

fileDragging EmitType<FileDragEventArgs>

Triggers while dragging the file/folder.

fileDropped EmitType<FileDragEventArgs>

Triggers when the file/folder is dropped.

fileLoad EmitType<FileLoadEventArgs>

Triggers before the file/folder is rendered.

fileOpen EmitType<FileOpenEventArgs>

Triggers before the file/folder is opened.

fileSelect EmitType<FileSelectEventArgs>

Triggers when the file/folder is selected/unselected.

fileSelection EmitType<FileSelectionEventArgs>

Triggers before the file/folder is selected.

folderCreate EmitType<FolderCreateEventArgs>

This event is triggered when a folder is successfully created. It provides an opportunity to retrieve details about the newly created folder.

menuClick EmitType<MenuClickEventArgs>

Triggers when the context menu item is clicked.

menuClose EmitType<MenuCloseEventArgs>

Triggers before the context menu is closed.

menuOpen EmitType<MenuOpenEventArgs>

Triggers before the context menu is opened.

move EmitType<MoveEventArgs>

This event is triggered when a file or folder is pasted into the destination path.

popupClose EmitType<PopupOpenCloseEventArgs>

Triggers when the dialog is closed.

popupOpen EmitType<PopupOpenCloseEventArgs>

Triggers when the dialog is opened.

rename EmitType<RenameEventArgs>

This event is triggered when a file or folder is successfully renamed. It provides an opportunity to fetch details about the renamed file.

search EmitType<SearchEventArgs>

This event is triggered when a search action occurs in the search bar of the File Manager component. It triggers each character entered in the input during the search process.

success EmitType<SuccessEventArgs>

Triggers when the AJAX request is success.

toolbarClick EmitType<ToolbarClickEventArgs>

Triggers when the toolbar item is clicked.

toolbarCreate EmitType<ToolbarCreateEventArgs>

Triggers before creating the toolbar.

uploadListCreate EmitType<UploadListCreateArgs>

Triggers before rendering each file item in upload dialog box.