Search results

FileManager

The FileManager component allows users to access and manage the file system through the web browser. It can performs the functionalities like add, rename, search, sort, upload and delete files or folders. And also it provides an easy way of dynamic injectable modules like toolbar, navigationpane, detailsview, largeiconsview.

 <div id="file"></div>
 let feObj: FileManager = new FileManager();
 feObj.appendTo('#file');

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.

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,}

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: ’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}’ }]}

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

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

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

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

Shows or hides the files and folders that are marked as hidden.

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

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

clearSelection

Deselects the currently selected folders and files in current path.

Returns void

createFolder

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

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

deleteFiles

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

destroy

Triggers when the component is destroyed.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

disableMenuItems

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

disableToolbarItems

Disables the specified toolbar items of the file manager.

Parameter Type Description
items string[] Specifies an array of items to be disabled.

Returns void

downloadFiles

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

enableToolbarItems

Enables the specified toolbar items of the file manager.

Parameter Type Description
items string[] Specifies an array of items to be enabled.

Returns void

filterFiles

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

getLocalData

Returns the persistence data for component

Returns any

getMenuItemIndex

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

getRootElement

Returns the route element of the component

Returns HTMLElement

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.

Parameter Type Description
item string Specifies an item to get the index position.

Returns number

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

openFile

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

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshFiles

Refreshes the folder files of the file manager.

Returns void

refreshLayout

Refreshes the layout of the file manager.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

renameFile

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

selectAll

Selects the entire folders and files in current path.

Returns void

uploadFiles

Opens the upload dialog in file manager.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

beforeDownload

EmitType<BeforeDownloadEventArgs>

Triggers before sending the download request to the server.

beforeImageLoad

EmitType<BeforeImageLoadEventArgs>

Triggers before sending the getImage request to the server.

beforePopupClose

EmitType<BeforePopupOpenCloseEventArgs>

Triggers before the dialog is closed.

beforePopupOpen

EmitType<BeforePopupOpenCloseEventArgs>

Triggers before the dialog is opened.

beforeSend

EmitType<BeforeSendEventArgs>

Triggers before sending the AJAX request to the server.

created

EmitType<Object>

Triggers when the file manager component is created.

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.

Triggers when the context menu item is clicked.

Triggers before the context menu is opened.

popupClose

EmitType<PopupOpenCloseEventArgs>

Triggers when the dialog is closed.

popupOpen

EmitType<PopupOpenCloseEventArgs>

Triggers when the dialog is opened.

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.