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
adjust	adjusts the component to the size of the parent HTML container
attachEvent	attaches the handler to an inner event of the component
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 all rows that match the criterion, or only the first one
getActive	gets the IDs of active files/folders
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 that is after the specified item, either directly after or after a number of items (defined by the step)
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 folder IDs in the path
getPathNames	gets an array of folder names in the path
getPrevId	returns the ID of an item that is before the specified item, either directly before or before a number of items (defined by the step)
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 the 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 handler
hide	hides the view
hideProgress	hides a progress bar/icon
hideSearchResults	hides search results
hideTree	hides the Tree panel
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 a 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
queryView	returns inner element/elements of a widget that correspond(s) to the defined parameters
refresh	repaints the whole view or a certain item
remove	removes the specified item/items from datastore
renameFile	renames a folder/a file
resize	adjusts the view to a new size
setDefaultHandlers	sets a common script for action handling
setPath	selects a certain folder and sets path values for it
show	makes the component visible
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 a new UI, the ID of which will be locked in the parent ID space
unbind	breaks "bind" link
unblockEvent	cancels events blocking that was enabled by the 'blockEvent' command
updateItem	updates the data item with new properties
uploadFile	opens the file upload dialog
waitSave	allows to catch the moment when a data operation was saved to the server

onAfterAdd	fires after adding an item to the datastore
onAfterBack	fires after the Filemanager "back" button has been clicked
onAfterCreateFolder	fires after a new folder has been created
onAfterDelete	fires after an item is removed
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 an item to the datastore
onBeforeBack	fires before the Filemanager "back" button has been clicked
onBeforeCreateFolder	fires before a new folder has been created
onBeforeDelete	fires before an item is removed
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	fires immediately before data loading has 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 of the 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 a data item is being updated
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 on the server during any updates made on the client
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 before a component of the file manager is initialized
onViewShow	fires when any hidden view is shown

animate	defines the type of animation, with which the view is shown, if it is a Multiview cell
borderless	used to hide the component borders
container	an HTML container (or its ID) where the component should be initialized
css	the name of the CSS class that will be applied to the view container or the object with styles
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
filterMode	defines the pattern for tree item filtering
gravity	sets the view gravity
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 ID of a widget
legacyUploader	defines that a legacy file uploader will be used
maxHeight	sets the maximum height for the view
maxWidth	sets the maximum width for the view
menuFilter	filters menu items before showing a menu on the page
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
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	the event handler is called just after the component has been completely initialized
removeMissed	defines how to treat items in case of reloading
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
width	sets the width of a widget

$$	locates sub-item by id
$dropAllow	can be redefined, if you need custom drop rules
$getSize	returns the current size of the component
$height	the current height of the view
$setNode	defines HTML element for the component
$setSize	sets the component size
$skin	the method which will be called when skin is defined
$view	reference to the top HTML element of the view
$width	the current width of the view
config	all options from the initial component configuration
data	inner DataStore
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