File Manager API Reference

Methods

  • copyFile - copies a selected file/folder
  • createFolder - creates a new folder
  • deleteFile - deletes items by their ids
  • download - downloads a selected file
  • editFile - opens editor for a certain item in the active view (Tree or Files view)
  • getActive - gets ids of active items
  • getActiveView - gets the reference to the active view (Tree or Files view)
  • getCurrentFolder - gets the name of the folder selected in Tree
  • getMenu - gets the popup menu object
  • getPath - gets an array of folders' ids in a path
  • getPathNames - gets an array of folders' names in a path
  • getSearchData - gets an array of items (files, folders) that contains text in their names
  • getSelectedFile - gets a string or an array with file (folder) name(s) selected in the "table" view
  • getUploader - gets the uploader object
  • goBack - goes back in the navigation history
  • goForward - goes forward in the navigation history
  • hideSearchResults - hides search results
  • hideTree - hides the Tree panel
  • levelUp - selects the parent folder
  • markCopy - preselects files/folders for copy operation
  • markCut - preselects files/folders for move operation
  • moveFile - moves a selected file/folder
  • pasteFile - pastes files/folders that were selected for copying or moving
  • renameFile - renames a folder/file
  • setPath - selects a certain folder and sets path values for it
  • showSearchResults - searches text in the active folder and displays results on the screen
  • showTree - shows the Tree panel
  • uploadFile - opens a file upload dialog

copyFile

copies a selected file/folder

fmanager.copyFile(source,target);

params:

  • source - {string, array} the copied items ids
  • target - {string} the id of the folder where the items are copied to

createFolder

creates a new folder

fmanager.createFolder(targetId);

params:

  • targetId - an id of parent folder where a new folder will be created (templateCreate is applied automatically)

deleteFile

deletes items by their ids

fmanager.deleteFile(ids);

params:

  • ids - {string, array} the ids of items that will be deleted

download

downloads a selected file

fmanager.download(id);
  • id - {string} the id of the downloaded file

editFile

opens editor for a certain item in the active view (Tree or Files view)

fmanager.editFile(id);

params:

  • id - id of the file/folder for editing

getActive

gets ids of active items

var ids = fmanager.getActive();

returns:

  • {string} - the ids of active views

getActiveView

gets the reference to the active view (Tree or Files view)

var view = fmanager.getActiveView();

returns:

  • {object} - the object of the active view

getCurrentFolder

gets the name of the folder selected in Tree

var folder = fmanager.getCurrentFolder();

returns:

  • {string} - the name of the selected folder

getMenu

gets the popup menu object

var menu = fmanager.getMenu();

returns:

  • {object} - the popup menu object

getPath

gets an array of folders' ids in a path

var pathIds = fmanager.getPath();
 
// or
 
var pathIds = fmanager.getPath(id);

params:

  • id - {string} the id of the selected folder (optional)

returns:

  • {array} - an array of folders' ids

getPathNames

gets an array of folders' names in a path

var pathNames = fmanager.getPathNames();
 
// or 
 
var pathNames = fmanager.getPathNames(id);

params:

  • id - {string} the id of the selected folder (optional)

returns:

  • {array} - an array of folders' names

getSearchData

gets an array of items (files, folders) that contains text in their names

var result = fmanager.getSearchData(id,text);

params:

  • id - {mixed} the id of the folder where the text is searched
  • text - {string} searched text

returns:

  • {array} - an array of items

getSelectedFile

gets a string or an array with file (folder) name(s) selected in the "table" view

var selected = fmanager.getSelectedFile(id,text);

returns:

  • {string/array} - selected file(nested folder) name(s)

getUploader

gets the uploader object

var uploader = fmanager.getUploader();

returns:

  • {object} - the uploader object

goBack

goes back in the navigation history

fmanager.goBack(step);

params:

  • step - {number} the number of steps back (1 by default)

goForward

goes forward in the navigation history

fmanager.goForward(step);

params:

  • step - {number} the number of steps forward (1 by default)

hideSearchResults

hides search results

fmanager.hideSearchResults();

hideTree

hides the Tree panel

fmanager.hideTree();

levelUp

selects the parent folder

fmanager.levelUp(id);
  • id - {string} the id of the selected file/folder

markCopy

preselects files/folders for copy operation

fmanager.markCopy(id);
  • id - {string,array} ids of files for copying

markCut

preselects files/folders for move operation

fmanager.markCut(id);
  • id - {string,array} ids of files for moving

moveFile

moves a selected file/folder

fmanager.moveFile(source,target);

params:

  • source - {string} the moved file's id (or an array of ids in case of multiple files)
  • target - {string} the id of the folder where the file(s) is moved to

pasteFile

pastes files/folders that were selected for copying or moving

fmanager.pasteFile(id)

params:

  • id - {mixed} the id of the folder where copied or cut files will be pasted

renameFile

renames a folder/file

fmanager.renameFile(id,name,property);

params:

  • id - {string} the id of the folder/file that should be renamed
  • name - {string} a new filename
  • property - {string} "value" by default, the property of a file/folder object that contains filename

setPath

selects a certain folder and sets path values for it

fmanager.setPath(id);

params:

  • id - {string} a folder id

showSearchResults

searches text and displays results on the screen

fmanager.showSearchResults(text);

params:

  • text - {string} searched text

showTree

shows the Tree panel

fmanager.showTree();

uploadFile

opens a file upload dialog

fmanager.uploadFile(target);
  • target - the id of the folder where a file will be uploaded

Properties

  • disabledHistory - the flag that disables the tracking history
  • handlers - a collection of server scripts for action handling
  • icons - a collection of icons
  • mode - the initially selected mode ("table" by default)
  • modes - an array with modes names
  • readonly - the readonly mode for File Manager
  • structure - the configuration of File Manager views
  • templateCreate - a template for a newly created folder
  • templateDate - a template applied for the format of folder/file's date of modification
  • templateIcon - a template for icons that can be customized (used in "files" and "table" views)
  • templateName - a template applied for the folder/file's name
  • templateSize - a template applied for the file size
  • uploadProgress - an object with configuration of progress bar that appears during the upload

disabledHistory

disables tracking history ("false" by default)

webix.ui({
    view:"filemanager",
    id:"files",
    disabledHistory: true
    ...
});

handlers

specifies the collection of server scripts for action handling

webix.ui({
    view:"filemanager",
    handlers:{
        "upload"    : "data/saving.php",
        "download"  : "data/saving.php",
         ...
    }
});

icons

defines icons for File Manager

webix.ui({
    view:"filemanager",
    id:"files",
    icons: { 
        folder: "folder",
        doc: "file-word-o",
        ...
    }
});

mode

defines the id of the initially selected mode ("table" by default)

webix.ui({
    view:"filemanager",
    id:"files",
    mode: "files"
    ...
});

modes

specifies an array of modes in the File view

webix.ui({
    view:"filemanager",
    id:"files",
    modes: ["files","table"]
    ...
});

readonly

sets readonly mode for File Manager

webix.ready(function(){
    webix.ui({
        view:"filemanager",
        readonly: true,
        url:"../common/data.php"
    });
});

structure

sets the configuration of File Manager views

webix.ui({
    view:"filemanager",
    id:"files",
    structure:{
       ...
    } 
    ...
});

Related sample:  Adding New Mode

templateCreate

defines a template for a newly created folder

templateCreate: function(){
    return {value: "newFolder", type: "folder", date: new Date()};
}

templateDate

defines a template applied for the format of folder/file's date of modification

webix.ui({
    view:"filemanager",
    templateDate: function(obj){
        var date = obj.date;
        if(typeof(date) != "object"){
           date = new Date(parseInt(obj.date,10)*1000);
        }
        return webix.i18n.fullDateFormatStr(date);
    }
});

templateIcon

defines a template for icons that can be customized (used in "files" and "table" views)

templateIcon: function(obj,common){
    return "<span class='webix_icon webix_fmanager_icon fa-"
        +(common.icons[obj.type]||common.icons["file"])+"'></span>";
},

templateName

defines a template applied for the folder/file's name

templateName: function(fileObj,common){
    return fileObj.value
}

templateSize

defines a template applied for the file size

templateSize: function(obj,common){
    var value = obj.size;
    var isInt = (parseInt(value,10) == value);
 
    // apply locale formating
    var getFormatedValue = webix.Number.numToStr({
        decimalDelimiter:webix.i18n.decimalDelimiter,
        groupDelimiter:webix.i18n.groupDelimiter,
        decimalSize : isInt?0:webix.i18n.groupSize
    });
    value = getFormatedValue(value); 
 
    // get size label
    var labels = webix.i18n.filemanager.sizeLabels; // ["B","KB",...]
    var sizeIndex = 0;
    while(value/1024 >1){
        value = value/1024;
        sizeIndex++;
    }
    var label = labels[sizeIndex];
 
    return value+""+label;
},

uploadProgress

defines an object with configuration of progress bar that appears during the upload

webix.ui({
    view:"filemanager",
    id:"files",
    uploadProgress: {
        type:"top",
        delay:3000,
        hide:true
    }
});
Back to top