Working with Server

Loading Data

Unlike all other Webix widgets, File Manager 7.2 is a backend-oriented component.

Icons and preview images for files are generated by a backend service.

If you do not have a backend server, you should override the methods of the Backend service and return promises of client data.

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.

Saving data

By default, File Manager expects a working backend server with REST API and saves data pessimistically, which means that it first sends a request to the server, then upon a successful response it updates the client. We provide an example of backend code in NodeJS and Golang.

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

To override Backend take the following steps:

  • extend it
  • use the override setting of File Manager
class MyBackend extends fileManager.services.Backend {
    // define and override methods here
}
 
webix.ui({
    view: "filemanager",
    url: "//localhost:3200/",
    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 Data

If you have client 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

url(path)

Returns the full path to a file, a directory or a url. url() is used by other methods for making URLs for server requests.

Parameters:

  • path (string) - a relative path.

Returns:

  • url (string) - the full path.

files(id)

Returns the contents of the current working directory. The method is called when the user opens a directory.

Parameters:

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

Returns:

  • files (promise) - a promise that resolves with an array of objects

Request info:

  • Method: GET
  • URL example:
http://localhost:3200/files?id=%2Fnew%20directory

The request URL string contains the URL segment and the ID of the current directory ("/new directory" in this case).

  • Response from the server:

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
]

search(id, search)

Returns all files and directories that have the text from search in their names.

Parameters:

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

Returns:

  • folders (promise) - a promise that resolves with an array of objects

Request info:

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

The request URL string contains the URL segment, the ID of the current directory ("/"), and the query string ("item" in this case).

  • Response from the server:

Server returns an array containing the object(s) 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 found
]

folders()

Returns the hierarchy of all directories. The method is called after File Manager initialization to show all folders in the tree.

Returns:

  • folders (promise) - a promise that resolves with an array of objects

Request info:

  • Method: GET
  • URL example:
http://localhost:3200/folders
  • Response from the server:

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) - the file or directory data
  • size (string, optional) the type of the icon (in the case with our backend code in Golang, its the subfolder on the server: "small" or "big")

Returns:

  • url (string) - a string with a URL, e.g.:
http://localhost:3200/icons/small/code/txt.svg

The URL string contains the URL segment, size (small/big), type (code, image...) and the extension of the file.

Note that the icon of every type is only loaded once and further reused by the browser if needed.

upload()

Returns the path to a script for file upload. The method does not accept any parameters.

Returns:

  • url (string) - a string URL for uploading files (by default, "http://localhost:3200/upload").

readText(id)

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

Parameters:

  • id (string) - the file ID.

Returns:

  • content (string) a promise that resolves with the content of a text file

Request info:

  • Method: GET
  • URL example:
http://localhost:3200/text?id=%2Fitem.txt

Contains the URL segment, the ID of the current directory ("/") and the name of the file.

writeText(id, content)

Saves a text file to the server and returns an object with the file data.

Parameters:

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

Returns:

  • info (promise) - a promise that resolves with the file data

Request info:

  • Method: POST
  • URL example:
http://localhost:3200/text

Contains the URL segment.

  • Response from the server:

Server returns an object of the file data.

{
  "value":"write.txt","id":"/write.txt","size":42,
  "date":1584632624,"type":"code"
}
  • Form data example:
id: /write.txt
content: Hello, I'm the text written in the file :)

directLink(id[, download])

Returns a link for viewing the file or a download link (string).

Parameters:

  • id (string) - the ID of the file
  • 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:

  • url (string) - the full path, e.g.:
http://localhost:3200/direct?id=%2Fimage.jpg&download=true

Contains the URL segment, the ID of the current directory ("/"), the name of the file and the download parameter if specified.

previewURL(obj, width, height)

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

Parameters:

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

Returns:

  • url (string) - the path to the file preview, e.g.:
http://localhost:3200/preview?width=464&height=407&id=%2Fimage.jpg

Contains the URL segment, width/height of the image, the ID of the current directory ("/") and the name of the image.

remove(id)

Removes a file or a directory.

Parameters:

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

Returns:

  • result (promise) - a promise that resolves with a server response:
    • success: {};
    • error: {invalid: true, error:/* Error 500 message */}).

Request info:

  • Method: POST
  • URL example:
http://localhost:3200/delete

Contains the URL segment.

  • Form data example:
id: /data.js

The deleted file.

makedir(id, name)

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

Parameters:

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

Returns:

  • folder (promise) - a promise that resolves with the directory data (object)

Request info:

  • Method: POST
  • URL example:
http://localhost:3200/makedir

Contains the URL segment.

  • Response from the server:

Server returns an object with the directory data.

{
  "value":"New folder","id":"/New folder","size":0,
  "date":1584634921,"type":"folder"
}

makefile(id, name)

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

Parameters:

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

Returns:

  • file (promise) - a promise that resolves with file data (object)

Request info:

  • Method: POST
  • URL example:
http://localhost:3200/makefile

Contains the URL segment.

  • Response from the server:

Server returns an object with the file data.

{
  "value":"New file.txt","id":"/New file.txt","size":0,
  "date":1584635214,"type":"code"
}

copy(id, to)

Copies a file or a directory and returns the object with new file or directory data.

Parameters:

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

Returns:

  • info (promise) - a promise that resolves with new file or directory data (object)

Request info:

  • Method: POST
  • URL example:
http://localhost:3200/copy

Contains the URL segment.

  • Response from the server:

Server returns an object with new file or directory data.

{
  "value":"write.txt","id":"/new directory/write.txt","size":42,
  "date":1584635434,"type":"code"
}
  • Form data example:
id: /write.txt
to: /new directory

move(id, to)

Moves a file or a directory to a new folder and returns the object with file or directory data

Parameters:

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

Returns:

  • info (promise) - a promise that resolves with file or directory data (object)

Request info:

  • Method: POST
  • URL example:
http://localhost:3200/move

Contains the URL segment.

  • Response from the server:

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"
}
  • Form data example:
id: /To move/move.txt
to: /New folder

rename(id, name)

Renames a file or a directory and returns the object with the new file or directory ID.

Parameters:

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

Returns:

  • result (promise) - a promise that resolves with the object with the ID

Request info:

  • Method: POST
  • URL example:
http://localhost:3200/rename

Contains the URL segment.

  • Response from the server:

If the promise resolves successfully server returns an object with the file or directory data.

{
  "invalid":false,"error":"","id":"/Renamed.txt"
}
  • Form data example:
id: /New file.txt
name: Renamed.txt

getRootName()

Returns the name of the root directory (string, "My Files" by default).

getMeta(obj)

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

Parameters:

  • file (object) - the file data.

Returns:

  • meta (promise) - a promise that resolves with an object containing meta-tags (for images and audio)

Request info:

  • Method: GET
  • URL example:
http://localhost:3200/meta?id=%2F01_iamx_-_little_deaths.new.mp3

Contains the URL segment, the ID of the current directory and the name of the file.

  • Response from the server:
{
  "Title":"IAMX - Little Deaths","Artist":"IAMX",
  "Album":"Unfall","Year":"2017","Genre":"Electronic"
}

getInfo([force])

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

Parameters:

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

Returns:

  • info (promise) - a promise that resolves with an object with stats about you file system

Request info:

  • Method: GET
  • URL example:
http://localhost:3200/info

Contains the URL segment.

  • Response from the server (example):
{
    stats: {
        free: 52000000,
        total: 250000000,
        used: 198400000,
    },
}
Back to top