File Manager is a backend-oriented component and expects a server to fetch data from. You can provide a link to it by the url setting:
webix.ui({
view: "filemanager",
url:"http://localhost:3200/"
});
Sample backend for File Manager is available for downloading.
If you do not have a backend server, you should override the methods of the Backend service and return promises of client-side data.
Icons and preview images for files are generated by a backend service.
File Manager does not load all the data to the client at once: only the root directory and the initially opened folder.
Contents of other directories are loaded on demand, when opened, and cached.
Backend is a server-side model. It is defined as an object and has methods for sending requests.
Check out the full list of methods.
1. Extend it.
2. Use the override setting of File Manager.
class MyBackend extends fileManager.services.Backend {
// define and override methods here
}
webix.ui({
view: "filemanager",
url: "https://docs.webix.com/filemanager-backend/",
override: new Map([[fileManager.services.Backend, MyBackend]]),
});
You can send AJAX requests to your backend server:
class MyBackend extends fileManager.services.Backend {
files(id) {
return webix.ajax("//localhost:3200/files", { id })
.then((data) => data.json());
}
}
You can access external files served from the server:
class MyBackend extends fileManager.services.Backend {
icon(type, name, size) {
return `//localhost:3200/icons/${size || "small"}/image/jpg.svg`;
}
}
If you have client-side data, you can return them inside of a promise:
class MyBackend extends fileManager.services.Backend {
getInfo() {
return Promise.resolve({
stats:{
free: 52 * 1000 * 1000,
total: 250 * 1000 * 1000,
used: 198.4 * 1000 * 1000,
}
});
}
}
Related sample: File Manager: Data Source
Below you can find descriptions of the following methods:
url() is used by other methods for preparing URLs for server requests.
Parameters:
Returns: the full path.
The method gets called upon opening a directory.
Parameters:
Returns: a promise that resolves with an array of files.
Request:
GET http://localhost:3200/files?id=%2Fnew%20directory
Response:
The server returns an array of objects found on the directory.
[
{"value":"puppy.jpeg","id":"/new directory/puppy.jpeg",
"size":0,"date":1584377524,"type":"image"},
{"value":"text.txt","id":"/new directory/text.txt",
"size":0,"date":1584377353,"type":"code"},
// other
]
Returns all files and directories matching the text from search bar.
Parameters:
Returns: a promise that resolves with an array of files and directories.
Request:
GET http://localhost:3200/files?id=%2F&search=item
Note that for the filter parameter, alongside the search=filter, the request can include another parameter which stores a JSON object with the filter config (all the filter object properties, except for location)
e.g. /files?id=%2F&search=ad&filter=%7B%22type%22%3A%5B%22image%22%5D%2C%22date%22%3A%7B%22start%22%3A%222024-11-12%22%2C%22end%22%3A%222024-12-28%22%7D%2C%22size%22%3A%5B%7B%22start%22%3A16385%2C%22end%22%3A1048576%7D%2C%7B%22start%22%3A1048577%2C%22end%22%3A134217728%7D%5D%7D
Response:
The server returns an array of the objects matching the query. If no matches are found returns an empty array.
[
{"value":"item.txt","id":"/item.txt","size":0,"date":1584627123,"type":"code"},
// other matches if any
]
The method is called upon initialization to show all folders
Returns: a promise that resolves with an array of all folders
Request:
GET http://localhost:3200/folders
URL contains the URL segment.
Response:
The server returns the hierarchy of all directories.
[
{"value":"new directory","id":"/new directory","size":0,"date":1584377524,
"type":"folder"},
{"value":"another directory","id":"/another directory","size":0,"date":1584376369,"type":"folder",
"data":[
{"value":"inner directory","id":"/another directory/inner directory","size":0,
"date":1584376388,"type":"folder"}
]
}
]
Returns the path to an icon served from the backend server.
Parameters:
Returns: URL string.
Request:
GET http://localhost:3200/icons/small/code/txt.svg
URL contains icon size (small/big), type (code, image...) and the extension of the file.
Response:
The server returns an icon.
Note that the icon of every type is only loaded once and further reused by the browser if needed.
The method is used for uploading files.
Returns: URL string for uploading files (by default, "http://localhost:3200/upload").
If the request fails the server returns an error object:
{
invalid: true,
err: "Some error message here"
}
Reads and returns the content of a text file (type:"code").
Parameters:
Returns: a promise that resolves with the content of the text file.
Request:
GET http://localhost:3200/text?id=%2Fitem.txt
The method saves a text file with new contents to the server.
Parameters:
Returns: a promise that resolves with the file data.
Request:
POST http://localhost:3200/text
Form Data
id: /write.txt
content: Hello, I'm the text written in the file :)
Response:
The server returns an object with the file data.
{
"value":"write.txt","id":"/write.txt","size":42,
"date":1584632624,"type":"code"
}
The method is used for file viewing or downloading.
Parameters:
Returns: the full path.
Request:
GET http://localhost:3200/direct?id=%2Fimage.jpg&download=true
Returns a direct link to the generated preview for a file.
Parameters:
Returns: path to the file preview.
Request:
GET http://localhost:3200/preview?width=464&height=407&id=%2Fimage.jpg
Response:
The server returns the preview image.
The method removes a file or a directory.
Parameters:
Returns: a promise that resolves with a server response (success or error).
Request:
POST http://localhost:3200/delete
Form Data
id: /data.js
If the request fails the server returns an error object:
{
invalid: true,
err: "Some error message here"
}
Creates a folder and returns the object with the directory data.
Parameters:
Returns: a promise that resolves with the directory data (object).
Request:
POST http://localhost:3200/makedir
Form Data
id: /
name: University
Response:
The server returns an object with the directory data.
{
"value":"New folder","id":"/New folder","size":0,
"date":1584634921,"type":"folder"
}
If the request fails the server returns an error object:
{
invalid: true,
err: "Some error message here"
}
Creates an empty file and returns the object with file data.
Parameters:
Returns: a promise that resolves with the file data.
Request:
POST http://localhost:3200/makefile
Form Data
id: /
name: Poetry.txt
Response:
The server returns an object with the file data.
{
"value":"New file.txt","id":"/New file.txt","size":0,
"date":1584635214,"type":"code"
}
If the request fails the server returns an error object:
{
invalid: true,
err: "Some error message here"
}
The method copies a file/directory and returns the data object of new file/directory.
Parameters:
Returns: a promise that resolves with new file or directory data (object).
Request:
POST http://localhost:3200/copy
Form Data
id: /Poetry.txt
to: /University
Response:
The server returns an object with new file or directory data.
{
"value":"write.txt","id":"/new directory/write.txt","size":42,
"date":1584635434,"type":"code"
}
If the request fails the server returns an error object:
{
invalid: true,
err: "Some error message here"
}
The method moves a file or directory to a new folder and returns the object with file or directory data.
Parameters:
Returns: a promise that resolves with file or directory data.
Request:
POST http://localhost:3200/move
Form Data
id: /Poetry.txt
to: /University
Response:
The server returns an object with the file or directory data that is being moved.
{
"value":"move.txt","id":"/New folder/move.txt","size":0,
"date":1584635665,"type":"code"
}
If the request fails the server returns an error object:
{
invalid: true,
err: "Some error message here"
}
The method renames a file or directory and returns the object with the new file or directory ID.
Parameters:
Returns: a promise that resolves with the object with the ID.
Request:
POST http://localhost:3200/rename
Form Data
id: /New file.txt
name: Renamed.txt
Response:
The server returns an object with the file or directory data:
{
"invalid":false,"error":"","id":"/Renamed.txt"
}
If the request fails the server returns an error object:
{
invalid: true,
err: "Some error message here"
}
The method returns the name of the root directory (string, "My Files" by default).
The method returns meta data of images and audio/video files (for most popular extensions like MP3, MP4, JPEG, etc).
Parameters:
Returns: a promise that resolves with an object containing meta-tags (for images and audio).
Request:
GET http://localhost:3200/meta?id=%2Fimage.jpg
Response:
The server returns an object with the file meta data.
{
"Title":"IAMX - Little Deaths","Artist":"IAMX",
"Album":"Unfall","Year":"2017","Genre":"Electronic"
}
The method returns the data of the root directory (total, free and used space; in bytes).
Parameters:
Returns: a promise that resolves with an object with stats about your file system.
Request:
GET http://localhost:3200/info
Response:
The server returns a couple of objects.
The first one contains stats about your file system:
{
stats: {
free: 52000000,
total: 250000000,
used: 198400000
}
}
The second one contains file types for which the server can show content previews and return metadata:
"features": {
"preview": {
"code": true,
"document": true,
"image": true
},
"meta": {
"audio": true,
"image": true
}
}