Working with Server

Loading Data

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.

Dynamic Loading

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 Service

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.

How to Override Backend Service

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]]),
});

Calls to Backend Server

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());
    }
}

Accessing Remote URLs

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`;
    }
}

Working with Client-side Data

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

Backend Service Methods

Below you can find descriptions of the following methods:

url(path)

url() is used by other methods for preparing URLs for server requests.

Parameters:

  • path (string) - a relative path.

Returns: the full path.

files(id)

The method gets called upon opening a directory.

Parameters:

  • id (string) - ID of the current working directory

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:

  • id (string) - ID of the current working directory
  • search (string) - text from the search input

Returns: a promise that resolves with an array of files and directories.

Request:

GET http://localhost:3200/files?id=%2F&search=item

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
]

folders()

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"}
   ]
  }
]

icon(obj[, size])

Returns the path to an icon served from the backend server.

Parameters:

  • obj (object) - file or directory data
  • size (string, optional) - type of the icon

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.

upload()

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"
}

readText(id)

Reads and returns the content of a text file (type:"code").

Parameters:

  • id (string) - ID of the file

Returns: a promise that resolves with the content of the text file.

Request:

GET http://localhost:3200/text?id=%2Fitem.txt

writeText(id, content)

The method saves a text file with new contents to the server.

Parameters:

  • id (string) - ID of the file
  • content (string) - content of a text file

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:

  • id (string) - file ID;
  • download (boolean, optional) - pass true if you want to download a file; do not pass anything if you want to open a file in a browser tab.

Returns: the full path.

Request:

GET http://localhost:3200/direct?id=%2Fimage.jpg&download=true

previewURL(obj, width, height)

Returns a direct link to the generated preview for a file.

Parameters:

  • obj (object) - object with file data
  • width (number) - width of the image
  • height (number) - height of the image

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.

remove(id)

The method removes a file or a directory.

Parameters:

  • id (string) - ID of the file/directory.

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"
}

makedir(id, name)

Creates a folder and returns the object with the directory data.

Parameters:

  • id (string) - ID of the parent directory
  • name (string) - name of the folder

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"
}

makefile(id, name)

Creates an empty file and returns the object with file data.

Parameters:

  • id (string) - ID of the parent directory
  • name (string) - name of the folder

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"
}

copy(id, to)

The method copies a file/directory and returns the data object of new file/directory.

Parameters:

  • id (string) - ID of the original file or directory
  • to (string) - ID of the new parent directory

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"
}

move(id, to)

The method moves a file or directory to a new folder and returns the object with file or directory data.

Parameters:

  • id (string) - ID of the file or directory
  • to (string) - ID of the new parent directory

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"
}

rename(id, name)

The method renames a file or directory and returns the object with the new file or directory ID.

Parameters:

  • id (string) - ID of the file or directory
  • name (string) - new name (for files must include the extension)

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"
}

getRootName()

The method returns the name of the root directory (string, "My Files" by default).

getMeta(obj)

The method returns meta data of images and audio/video files (for most popular extensions like MP3, MP4, JPEG, etc).

Parameters:

  • file (object) - file data.

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"
}

getInfo([force])

The method returns the data of the root directory (total, free and used space; in bytes).

Parameters:

  • force (boolean, optional) - flag that will force a request to override caching.

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
    }
}
Back to top