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

Methods
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
Events
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
Properties
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
Other
$$ 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