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.


var filemanager = webix.ui({

Where to start

add adds an item to the store
addView add new view to 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 behaviour 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 clientside dataset or to the specified position
mapEvent routes events from one object to another
markCopy preselectes files/folders for copy operation
markCut preselectes files/folders for 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 view from layout-like component
renameFile renames a folder/a file
resize adjusts the view to a new size
resizeChildren resizes all children of the calling 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 sets properties of the data item
uploadFile opens the file upload dialog
onAfterAdd fires after adding item to datastore
onAfterDelete fires after item deleting
onAfterDrop fires after drag-n-drop has been finished
onAfterEditStop fires after the editor is closed
onAfterHideTree fires after the tree has been hidden
onAfterLevelDown fires after selection has been moved to the child folder
onAfterLoad fires after data loading is complete
onAfterRun fires after a selected file has been downloaded
onAfterShowTree fires after the tree has been shown
onAfterSort fires after sorting dataset
onBeforeAdd fires before adding item to datastore
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
onBeforeEditFile fires when the Rename action is chosen in the popup menu
onBeforeEditStop fires before editing is finished
onBeforeHideTree fires before the tree is hidden
onBeforeLevelDown fires before selection is moved to the child 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
onBeforePasteFile fires when the Paste action is chosen in the popup menu
onBeforeRun fires before a selected file is downloaded
onBeforeShowTree fires before the tree is expanded
onBeforeSort fires before sorting dataset
onBeforeUploadFile fires on the Upload action click
onBindRequest fires when the component is ready to receive data from the master component
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
onErrorResponse fires if an error has occured during some operation
onFolderSelect fires when a folder is selected
onHideSearchResults fires when search results were hidden
onItemRename fires when an item is renamed
onLoadError fires when an error occurs during data loading ( invalid server side response )
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 or not
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
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 specifies properties for a newly created folder
templateDate specifies the format of folder/file's date of modification
templateIcon a customizable template for icons in "Files" and "Table" view modes
templateName specifies how the folder/file's name will be displayed in File Manager
templateSize specifies the file size
templateType specifies 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)
Back to top