Data can be loaded in different formats, including JSON (the default one) and XML. The data item should include at least 5 properties:
An example of a JSON data item is given below:
{
id: "base1",
value: "Product1.jpg",
type: "image",
date: 1420717913,
size: 4500
},
You can use a data source in JSON, XML or other formats supported by Webix TreeStore. Data can be generated via any server-side script. In the data source you can use information from a real file system or records from a database.
When some action is executed (upload, download, etc.) with files, File Manager sends a POST Ajax request to the corresponding server-side script specified in the "handlers" property of FileManager configuration:
webix.ready(function(){
var fManager = new webix.ui({
view:"filemanager",
handlers:{
"upload" : "data/saving.php",
"download" : "data/saving.php",
"copy" : "data/saving.php",
"move" : "data/saving.php",
"remove" : "data/saving.php",
"rename" : "data/saving.php",
"create" : "data/saving.php"
}
});
fManager.load("data/get.php");
});
The request contains several parameters:
For example, if we copy a file with the id "myfile1" into the folder with the id "folder2", the request contains the following parameters:
{
action: "copy",
source: "myfile1",
target: "folder2"
}
File Manager is a purely client-side widget, therefore you can implement any logic at the backend. You can find several demos that implement PHP data in the File Manager package.
Related sample: Actions Processing
Requests and responses for various handlers (server scripts processing particular operations) may differ.
Request parameters are:
A basic response for file uploading must be a valid JSON with id and value parameters (where value is the name of the file after saving on the server side), other parameters are optional. The full response may look as follows:
{
"folder":"01_basic",
"value":"photo.jpg",
"id":"01_basic\/photo.jpg",
"type":"image",
"status":"server"
}
Request parameters are:
action:"copy"
source:"reports/sales01.doc,reports/sales02.doc"
target:"sales"
The response is an array. Each element of this array is an object that includes the following properties:
[
{"id":"sales\/sales01.doc","value":"sales01.doc"},
{"id":"sales\/sales02.doc","value":"sales02.doc"}
]
Request parameters are:
action:"copy"
source:"reports/sales01.doc,reports/sales02.doc"
The response is any valid JSON, e.g.:
["ok","ok"]
Request parameters are:
action: "create"
value: "newFolder"
source: "newFolder"
target: "documents/2016"
The response is a JSON object that includes the following properties:
{
"id":"documents\/2016\/newFolder",
"value":"newFolder"
}
Request parameters are:
action: "rename"
source: "documents/2016/newFolder"
target: "may"
The response is a JSON object that includes the following properties:
{
"id":"documents\/2016\/may",
"value":"may"
}
Dynamic loading presupposes the loading of long server-side datasets in smaller portions. Initially, the data fills the File Manager to some extent and later on it's fetched on demand.
There are two methods of loading data into File Manager dynamically:
1) "branch" mode
The initially loaded data can contain a minimum number of folders, e.g. only first-level folders. Folders that should be filled on demand must contain the webix_branch attribute. If such a folder contains at least one child folder of its own, you should additionally provide webix_child_branch attribute for this folder.
To enable dynamic loading, you need to define the "branch" attribute of the "handlers" property in the FileManager configuration and provide the url of the server-side script that will fetch the data when some branch is expanded:
webix.ui({
view:"filemanager",
id:"files",
handlers:{
"branch": "../common/data_branch.php",
...
}
});
$$("files").load("../common/data.php");
Let's consider the following example of json data generated by "data.php" that loads the initial tree structure:
{
id: "Files":,
...
data:[
{
id: "documents",
value: "documents",
type: "folder",
size: 0,
date: 1440421612,
webix_branch: 1
},
{
id: "images",
value: "images",
type: "folder",
size: 0,
date: 1440421625,
webix_branch: 1,
webix_child_branch: 1
}
]
}
When the content of the folder should be dynamically loaded (e.g. on expanding the branch), FileManager executes a script set by the "branch" parameter.
The request contains several parameters:
For example, if we open the folder with the "documents" id to view its content, the following parameters should be sent:
{
action: "branch",
source: "documents"
}
A server-side response should contain two properties:
An example of response for the "documents" folder from the above request is:
{ parent: "documents", data: [ ...array of child items... ] }
Related sample: Dynamic Branch Loading
2) "files" mode
The whole tree structure (folders) is loaded initially. The files of a particular folder will be dynamically loaded only when a folder will be opened for viewing. You should add the webix_files attribute for the folders that have files which should be loaded on demand.
To enable dynamic loading, you need to define the "files" attribute of the "handlers" property in the FileManager configuration and provide the url of a server-side script that will load data when some folder will be opened:
webix.ui({
view:"filemanager",
id:"files",
handlers:{
"files": "../common/data_dyn.php",
...
}
});
$$("files").load("../common/data.php");
Let's consider the following example of JSON data generated by "data.php" that loads the initial Tree structure:
{
id: "Files":,
...
data:[
{
id: "documents",
value: "documents",
type: "folder",
size: 0,
date: 1440421612,
webix_files: 1,
data:[
{
id: "documents/projects",
value: "projects",
type: "folder",
size: 0,
date: 1440421625,
webix_files: 1
},
{
id: "documents/images",
value: "images",
type: "folder",
size: 0,
date: 1440421625,
webix_files: 1
}
]
}
]
}
When files should be dynamically loaded, FileManager sends a request to the script set in the "files" parameter.
The request contains several parameters:
For example, if we open the folder with the "documents" id to view its content, the request contains the parameters below:
{
action: "files",
source: "documents"
}
A JSON response should contain two properties:
An example of response for the "documents" folder from the above request is:
{ parent: "documents", data: [ ...array of child items... ] }
Related sample: Dynamic File Loading
You can implement server-side searching for a file or a folder in FileManager. As data is loaded by portions, searching is mostly performed in the dynamic loading mode.
To process a search request, FileManager sends a POST Ajax request to the server-side script specified in the "search" attribute of the "handlers" property of FileManager configuration:
webix.ui({
view:"filemanager",
id:"files",
handlers:{
"search": "../common/data_branch.php",
...
}
});
The request contains several parameters:
For example, if you are searching files/folders that include "report" in their names, the request parameters will be the following:
{
action: "search",
source: "documents",
text: "report"
}
An example of response can be as follows:
[
{ id: "documents/reports", type: "folder",...},
{ id: "documents/reports/report2015.doc", ...},
...
]
Back to top