Working with Data

Loading Data

File Manager is a backend-oriented component and expects data loaded by the URL:

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

Data Structure

Files

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

• value - file name (including the extension);
• id - file ID. Represents the path to the file;
• size - file 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.

Folders

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

• value - folder name;
• id - folder ID. Represents the path to the folder;
• size - folder size in bytes;
• date - a JS Date object, a string formatted according to webix.i18n.parseFormat or a timestamp of a Date;
• type - "folder" for directories;
• data - array of data items the folder contains.

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

Data Services

File Manager has the following services for data:

1. Local Data

• stores data on the client side in Data Collections
• provides methods for getting, removing and repainting the data
• provides methods for getting and repainting the directories

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

2. Upload

• provides methods for uploading files to the server

const upload = $$("fm").getService("upload");
upload.fileDialog(id); // opens a dialog for uploading

3. Progress

• provides methods to visualize progress of operations on the client
• provides a method to work with files

this.app.getService("progress").files(label, files, callback => {
    // do something with files
});

4. Operations

• provides methods for adding/removing/updating data
• provides methods for manipulating data (e.g. copy, open, move, etc.)

// 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);

5. Backend

• provides methods for issuing requests to the backend to fetch data and save the changes back

const back = $$("fm").getService("backend");
back.folders(id).then((data) => console.log(data));

Data Operations

Getting data

All loaded directories are stored in DataCollections. You can access a collection 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);

If you're not sure whether the directory is loaded or not you can request files asynchronously:

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

Getting folders

The tree of all the directories is loaded at once and is stored in a view-less TreeCollection. To get all the directories, use the code below:

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.

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

Reloading data

Reloading current files

To reload all the files in the currently opened directory call the refresh method of the Local Service with 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