ui.filemanager

A handy widget for navigation and manipulation of files and folders..

File Manager is a powerful tool for working with different hierarchical data. It allows easily navigating through items, moving them, performing CRUD operations and uploading new elements.

Check File Manager documentation for more information.

Constructor

var filemanager = webix.ui({
    view:"filemanager",
    id:"files"
});
$$("files").load("files.php");

Where to start

• Overview of the File Manager Widget
• Samples

add	adds an item to the store
addView	adds a new view to a layout-like component
adjust	adjusts the component to the size of the parent HTML container
attachEvent	attaches the handler to an inner event of the component (allows behavior customizations)
bind	binds components
blockEvent	temporarily blocks triggering of ALL events of the calling object
callEvent	calls an inner event
clearAll	removes all items from the component
copy	makes a copy of an item
copyFile	copies a selected file/folder
count	returns the number of currently visible items
createFolder	creates a new folder
define	redefines a single configuration property (or a hash of properties)
deleteFile	deletes items by their ids
destructor	destroy datastore
detachEvent	detaches a handler from an event (which was attached before by the attachEvent method)
disable	disables the calling view (makes it dimmed and unclickable)
download	downloads a selected file
editFile	opens editor for a certain item in the active view (Tree or Files view)
enable	enables the calling view that was disabled by the 'disable' method
exists	checks whether an item with the specified id exists
filter	filters the component
find	returns rows that match the criterion
getActive	gets ids of active items
getActiveView	gets the reference to the active view (Tree or Files view)
getBranchIndex	gets index of the node in a specific branch
getChildViews	returns child views of the calling component
getCurrentFolder	gets the name of the folder selected in Tree
getFirstChildId	gets the ID of the first child of the specified branch
getFirstId	returns the ID of the first item
getFormView	returns master form for the input
getIdByIndex	returns the id of the item with the specified index
getIndexById	returns the index of the item with the specified id
getItem	gets the object of the data item with the specified id
getLastId	returns the id of the last item
getMenu	gets the popup menu object
getNextId	returns the ID of an item which is positioned the specified step after the specified item
getNextSiblingId	returns the id of the next sibling of the specified node
getNode	returns the main HTML container for the calling object
getParentId	get the ID of the parent node of the specified item
getParentView	returns the parent view of the component
getPath	gets an array of folders' ids in a path
getPathNames	gets an array of folders' names in a path
getPrevId	returns the ID of an item which is positioned the specified step before the specified item
getPrevSiblingId	returns the id of the previous sibling of the specified node
getSearchData	gets an array of items (files, folders) that contain text in their names
getSelectedFile	gets a string or an array with file (folder) name(s) selected in the "table" view
getTopParentView	returns top parent view
getUploader	gets the uploader object
goBack	goes back in the navigation history
goForward	goes forward in the navigation history
hasEvent	checks whether the component has the specified event
hide	hides the view
hideProgress	hides a progress bar/icon
hideSearchResults	hides search results
hideTree	hides the Tree panel
index	returns the cell index in the layout collection
innerId	returns the inner ID of an item by its public (real) ID
isBranch	checks whether the node has any children
isEnabled	checks whether the view is enabled
isVisible	checks whether the view is visible
levelUp	selects the parent folder
load	loads data from an external data source.
loadBranch	loads data to the specified branch, as direct children of the node with the id provided
loadNext	sends a request to load the specified number of records to the end of the client-side dataset or to the specified position
mapEvent	routes events from one object to another
markCopy	preselectes files/folders for the Copy operation
markCut	preselectes files/folders for the Move operation
move	moves the specified item to the new position
moveFile	moves a selected file/folder
openFolders	opens folders in case of dynamic loading
parse	loads data to the component from an inline data source
pasteFile	pastes files/folders that were selected for copying or moving
reconstruct	rebuilds the layout
refresh	repaints the whole view or a certain item
remove	removes the specified item/items from datastore
removeView	removes the specified view of a layout-like component
renameFile	renames a folder/a file
resize	adjusts the view to a new size
resizeChildren	resizes all children of the called component
serialize	serializes data to a JSON object
setPath	selects a certain folder and sets path values for it
show	makes the component visible
showBatch	makes visible those elements which parameter 'batch' is set to the specified name
showProgress	displays a progress bar/ progress icon
showSearchResults	searches text and displays results on the screen
showTree	shows the Tree panel
sort	sorts datastore
sync	allows syncing two copies of data (all or just a part of it) from one DataCollection to another
ui	allows creating new ui, the id of which will be locked in the parent id space
unbind	breaks "bind" link
unblockEvent	cancels blocking events that was enabled by the 'blockEvent' command
updateItem	updates the data item with new properties
uploadFile	opens the file upload dialog

onAfterAdd	fires after adding item to datastore
onAfterBack	fires after the Filemanager "back" button has been clicked
onAfterCreateFolder	fires after a new folder has been created
onAfterDelete	fires after item deleting
onAfterDeleteFile	fires after a file/folder has been deleted
onAfterDrop	fires after drag-n-drop has been finished
onAfterDynParse	fires after the data loaded from the server-side script has been parsed into the widget
onAfterEditFile	fires after the Rename action is chosen in the popup menu and the editor is opened for the related item
onAfterEditStop	fires after the editor is closed
onAfterFileUpload	fires after a file has been uploaded successfully and the response from server has come
onAfterHideTree	fires after the tree has been hidden
onAfterLevelDown	fires after selection has been moved to the child folder
onAfterLevelUp	fires after the LevelUp button has been clicked (selection moves to the parent folder)
onAfterLoad	fires after data loading is complete
onAfterMarkCopy	fires after an item has been marked for copying
onAfterMarkCut	fires after an item has been marked for cutting
onAfterMenu	fires after the Actions menu is opened on clicking the Menu button
onAfterModeChange	fires after the mode of viewing files has been changed on clicking the Modes button
onAfterPasteFile	fires a file has been pasted
onAfterPathClick	fires after the path item has been clicked
onAfterRun	fires after a selected file has been downloaded
onAfterSearch	fires after filtering via the "search" input is finished
onAfterShowTree	fires after the tree has been shown
onAfterSort	fires after sorting dataset
onAfterUploadDialog	fires after the file dialog has opened
onBeforeAdd	fires before adding item to datastore
onBeforeBack	fires before the Filemanager "back" button has been clicked
onBeforeCreateFolder	fires before a new folder has been created
onBeforeDelete	fires before item deleting
onBeforeDeleteFile	fires when the Delete action is chosen in the popup menu
onBeforeDrag	fires before drag-n-drop has started
onBeforeDragIn	fires before a dragged item is moved over the droppable area
onBeforeDrop	fires before a dragged item is released over the droppable area
onBeforeDynLoad	fires before a request for data loading is sent to the server-side script
onBeforeDynParse	fires before the data loaded from the server-side script will be parsed into the widget
onBeforeEditFile	fires when the Rename action is chosen in the popup menu, but before editing started
onBeforeEditStop	fires before editing is finished
onBeforeFileUpload	fires before the uploader has started to upload a file
onBeforeHideTree	fires before the tree is hidden
onBeforeLevelDown	fires before selection is moved to the child folder
onBeforeLevelUp	fires before the LevelUp button is clicked (before selection moves to the parent folder)
onBeforeLoad	occurs immediately before data loading has been started
onBeforeMarkCopy	fires before an item has been marked for copying
onBeforeMarkCut	fires before an item has been marked for cutting
onBeforeMenu	fires before the Actions menu is opened on clicking the Menu button
onBeforeModeChange	fires before the mode of viewing files is changed on clicking the Modes button
onBeforePasteFile	fires when the Paste action is chosen in the popup menu
onBeforeRequest	fires before any request is sent to the server side
onBeforeRun	fires before a selected file is downloaded
onBeforeSearch	fires before filtering via the "search" input starts
onBeforeSearchRequest	fires before a search request is sent to the server-side (see details here)
onBeforeShowTree	fires before the tree is expanded
onBeforeSort	fires before sorting dataset
onBeforeUploadDialog	fires on the Upload action click, before the file dialog has opened
onBindRequest	fires when the component is ready to receive data from the master component
onComponentInit	fires when File Manager is initialized
onCopyError	fires if an error occurred during a file/folder copying
onDataRequest	fires when data from the server is requested for linear data structures (List, DataTable, DataView etc.) to implement dynamic data loading
onDataUpdate	fires when data item is in update process
onDestruct	occurs when component destroyed
onDynLoadError	fires if a request to the server-side script returns an error during dynamic loading
onErrorResponse	fires if an error has occured during some operation
onFolderSelect	fires when a folder is selected in the Tree view
onHideSearchResults	fires when search results are hidden
onHistoryChange	fires when path in the Path view changes
onItemRename	fires when an item is renamed
onItemSelect	fires when a folder is selected in the "Files" or "Table" views
onLoadError	fires when an error occurs during data loading ( invalid server side response )
onMoveError	fires if an error occurred during a file/folder moving to another folder
onPathComplete	fires when a path to a folder is completely shown in the related control
onPathLevel	fires when a folder name is added to the path
onShowSearchResults	fires when search results are displayed
onSuccessResponse	fires on successful save response
onViewInit	fires during the initialization of an object with the mode configuration

animate	defines or disables view change animation.
borderless	used to hide the component borders
cols	array of views objects arranged horizontally
container	an HTML container (or its id) where the component should be initialized
css	the name of a css class that will be applied to the view container
data	JavaScript array containing data for the component
datathrottle	sets the polling interval (the time period between the completion of a network request and the next request for data)
datatype	the type of loaded data
disabled	indicates whether an item is enabled
disabledHistory	disables the tracking history ("false" by default)
filterMode	defines the pattern for tree item filtering
gravity	sets the view gravity (1 by default)
handlers	specifies the collection of server scripts for action handling
height	sets the height of the component
hidden	defines whether the view will be hidden initially
icons	defines icons for File Manager
id	the component ID
isolate	masks IDs of all inner elements
margin	defines the space around elements (applies the specified value to all elements)
maxHeight	sets the maximum height for the view
maxWidth	sets the maximum width for the view
minHeight	sets the minimal height for the view
minWidth	sets the minimal width for the view
mode	defines the id of the initially selected mode ("table" by default)
modes	specifies an array of modes in the File view
noFileCache	defines whether caching is enabled
on	allows attaching custom handlers to inner events of the component
padding	defines the space between the element borders and content (applies the specified value to all sides).
paddingX	sets the right and left padding (applies the specified value to both sides)
paddingY	sets the top and bottom padding (applies the specified value to both sides)
readonly	sets File Manager into readonly mode ("false" by default)
ready	event handler called just after the component has been completely initialized
removeMissed	defines how to treat items in case of reloading
responsive	enables responsive mode for horizontal layout
rows	array of views objects arranged vertically
save	defines URLs for data saving
scheme	defines schemes for data processing
structure	sets the configuration of File Manager views
templateCreate	defines the template for a newly created folder
templateDate	defines a template applied for the format of folder/file's date of modification
templateIcon	a customizable template for icons in "Files" and "Table" view modes
templateName	defines a template applied for the folder/file's name
templateSize	defines the template applied for the file size
templateType	specifies the template applied for the type of a file
type	defines the layout borders
uploadProgress	defines an object with configuration of progress bar that appears during the upload
url	the URL which the component will use to load data after its initialization
visibleBatch	sets the batch that will be shown initially
width	sets the width of the component

$$	locates sub-item by id
$dropAllow	can be redefined, if you need custom drop rules
$getSize	returns the current size of the component
$height	current height of the view
$setSize	sets the component size
$skin	the method which will be called when skin is defined
$view	reference to top html element of the view
$width	current width of the view
config	all options from initial component configuration
name	indicates the name of the component (a read-only property)
waitData	eventual result of an asynchronous operation ('promise' object) for the loaded data

Back to top