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

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.

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

Study the models folder in the source code for method signatures.

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
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.