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, width: ‘auto’, template: ’${name}‘,customAttributes: { class: ‘e-fe-grid-name’}}, { field: ’fmmodified’, headerText: ‘DateModified’,minWidth: 120, width: ‘190’ }, { field: ‘size’, headerText: ‘Size’, minWidth: 90, width: ‘110’,template: ’${size}’ }]}

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

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

path

string

Specifies the current path of the file manager.

Defaults to ’/’

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

showThumbnail

boolean

Shows or hides the thumbnail images in largeicons view.

Defaults to true

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: ”}

view

string

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.

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

dataBind

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

Returns void

destroy

Triggers when the component is destroyed.

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

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

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.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

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.

Triggers when the context menu item is clicked.

Triggers before the context menu 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.