Working with Data

Loading Data

Unlike all other Webix widgets, File Manager is a backend-oriented component and expects data loaded by the URL:

view:"filemanager", url:"remote/data"

Data Structure

File Manager expects JSON data where each array element (data item) contains the following fields:

  • value - the name of a file or folder (including the extension)
  • id - the item id, represents the path to the file/folder
  • size - the size in bytes
  • date - a JS Date object, a string formatted according to webix.i18n.parseFormat or a timestamp of a Date
  • type - file type:
    • "archive" for .zip, .rar, .7z, .tar, .gz files
    • "audio" for .mp3, .ogg, .flac, .wav
    • "code" for .html, .htm, .js, .json, .css, .scss, .sass, .less, .php, .sh, .coffee, .txt, .md, .go, .yml files
    • "document" for docx, doc, odt, xls, xslx, pdf, djvu, djv, pptx, ppt files
    • "video" for .mpg, .mp4, .avi, .mkv, .ogv files
    • "image" for .png, .jpg, .jpeg, .webp, .gif, .tiff, .tif, .svg files
    • "file" (none of the above)
    • "folder" for directories

Depending on the type of the files, backend generates icons and preview images for them.

Jet Services

File Manager has three services for data:

  • Local - works with the client data
// update the file data on the client side
const data = {
    value:"myadventures.txt",
    date: new Date(),
    size:1231,
    id:"/myadventures.txt",
    type:"code"
};
$$("files").getService("local").updateFile(data.id, {
    size: data.size, date: data.date
});
  • Upload - uploads files to the server

  • Progress - visualizes progress of operations on the client. You can work with files via its method files() that takes the following parameters:

    • label (string) - label for an operation
    • files (array) - an array of files objects
    • callback (function) - returns promise that hides the popup upon resolve
this.app.getService("progress").files(label, files, callback => {
    // do smth with files
});
  • Operations - synchronizes the backend data with the client data
// open a file in a new browser tab
const file = {
    value:"pixeljuice.pdf",
    date: new Date(),
    size:7231,
    id:"/pixeljuice.pdf",
    type:"document"
};
$$("files").getService("operations").open(file);
  • Backend - works with the backend server

If you do not have a backend server or require custom logic, you can override the Backend service.

Data Operations

Getting data

All loaded directories are stored in DataCollections, each of which is accessible via its path. You can get to the current path by calling the getState method and referring to the path property of the resulting object:

const path = $$("fm").getState().path;

To access files in the current working directory, call the .files() method of the Local service with the following parameters:

  • path (string) - path to the directory;
  • sync (boolean) - if true, we assume that the directory is available on the client.
const path = $$("fm").getState().path;
const data = $$("fm").getService("local");
 
const collection = data.files(path, true);

Once loaded, a collection (directory) is cached, so we can always access it in the synchronous mode.

But if you're not sure whether the directory is loaded or not you can request files asynchronously. Data will be loaded in process:

data.files("/some/path").then((collection) => { /*custom logic*/} );

Additionally, you can serialize the data collection to access the data elements themselves:

const myfiles = data.files(path, true).serialize();

Related sample:  File Manager: Data Operations

Getting folders

The tree of all the directories is loaded at once and is stored in a view-less TreeCollection. If we want to get all the directories, the code would be like this:

Getting all the folders

const data = $$("fm").getService("local");
data.folders();

By default the root element of the folders collection is "My Files" with the "../files" path.

Related sample:  File Manager: Data Operations

Clearing data

Clearing current files

You can remove all elements from the currently opened directory by calling the clearAll method of its collection:

const data = $$("fm").getService("local");
const path = $$("fm").getState().path;
 
data.files(path).then((collection) => collection.clearAll());

Clearing all files

To remove all the files from all the directories we need to clear the file cache. To do this, we iterate the cache map and apply clearAll() to each file collection:

const data = $$("fm").getService("local");
 
data.fscache.each(collection => {
   collection.clearAll();
});

Clearing all folders

data.folders().then((collection) => collection.clearAll());

Related sample:  File Manager: Data Operations

Reloading data

Reloading current files

You can reload all the files in the currently opened directory by calling the refresh method of the Local Service and passing the current path as a parameter:

 const data = $$("fm").getService("local");
 const path = $$("fm").getState().path;
 data.refresh(path);

Reloading all folders

Folder tree can be reloaded by calling folders method of the Local Service and passing the argument true to it:

const data = $$("fm").getService("local");
data.folders(true);

Related sample:  File Manager: Data Operations

Note that when called without a parameter, the method will return the current folder structure.

Back to top
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of javascript file explorer product.