Работа с данными

Загрузка данных

File Manager ожидает URL для загрузки данных:

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

Структура данных

Файлы

File Manager ожидает JSON данные, где каждый элемент массива (файл) содержит следующие поля:

• value - имя файла(включая расширение);
• id - id элемента в виде пути к файлу;
• size - размер в байтах;
• date - JS Date объект, форматированная (согласно webix.i18n.parseFormat) строка или временная отметка Date;
• type - тип файла:
  • "archive" для .zip, .rar, .7z, .tar, .gz файлов
  • "audio" для .mp3, .ogg, .flac, .wav
  • "code" для .html, .htm, .js, .json, .css, .scss, .sass, .less, .php, .sh, .coffee, .txt, .md, .go, .yml файлов
  • "document" для docx, doc, odt, xls, xslx, pdf, djvu, djv, pptx, ppt файлов
  • "video" для .mpg, .mp4, .avi, .mkv, .ogv файлов
  • "image" для .png, .jpg, .jpeg, .webp, .gif, .tiff, .tif, .svg файлов
  • "file" (ничего из вышеперечисленного)
  • "folder" для директорий.

Папки

File Manager ожидает JSON данные, где каждый элемент массива (директория) содержит следующие поля:

• value - имя папки;
• id - ID папки в виде пути к ней;
• size - размер в байтах;
• date - JS Date объект, форматированная (согласно webix.i18n.parseFormat) строка или временная отметка Date
• type - "folder" для директорий;
• data - массив элементов, которые содержит папка.

В зависимости от типа файла сервер генерирует иконки и превью-изображения для них.

Сервисы для работы с данными

File Manager работает со следующими сервисами:

1. Local Data

• хранит данные в коллекциях на стороне клиента
• предоставляет методы для получения, удаления и перерисовки данных
• предоставляет методы для получения и перерисовки директорий

// обновление файла на клиентской стороне
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

• предоставляет методы для загрузки файлов на сервер

const upload = $$("fm").getService("upload");
upload.fileDialog(id); // открывает диалоговое окно загрузки

3. Progress

• предоставляет методы для визуализации прогресса операций на клиенте
• предоставляет методы для работы с файлами

this.app.getService("progress").files(label, files, callback => {
    // какие-либо действия с файлами
});

4. Operations

• предоставляет методы для добавления/редактирования/удаления данных
• предоставляет методы для работы с данными (напр. копирование, перемещение, и др.)

// открывает файл в новой вкладке браузера
const file = {
    value:"pixeljuice.pdf",
    date: new Date(),
    size:7231,
    id:"/pixeljuice.pdf",
    type:"document"
};
$$("files").getService("operations").open(file);

5. Backend

• предоставляет методы запросов к серверу для получения данных и сохранения изменений

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

Операции с данными

Как получить данные

Загруженные директории хранятся в коллекциях данных. Чтобы получить коллекцию, вызовите метод getState и затем обратитесь к свойству path у полученного объекта:

Загруженные директории хранятся в DataCollections, каждая из которых доступна через свойство path. Чтобы получить текущий путь нужно вызвать метод getState и затем обратиться к свойству path полученного объекта.

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

Как получить файлы

Чтобы получить файлы текузей директории, вызовите метод files() у сервиса Local со следующими параметрами:

• path (string) - путь к директории;
• sync (boolean) - в случае true, мы подразумеваем, что директория доступна на клиенте.

const path = $$("fm").getState().path;
const data = $$("fm").getService("local");
 
const collection = data.files(path, true);

Если вы не уверены, что директорию загружена, вы можете запросить данные асинхронно:

data.files("/some/path").then((collection) => { /* какая-либо логика */} );

Также вы можете сериализовать данные, чтобы получить доступ к самим элементам:

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

Как получить директории

Дерево всех папко загружается один раз и хранится в TreeCollection. Чтобы получить все директории, используйте следующий код:

Получение всех директорий

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

По умолчанию корневой элемент коллекции это "My Files", доступный по пути "../files".

Удаление данных

Удаление файлов текущей директории

Чтобы удалить элементы из текущей директории, вызовите метод clearAll() у коллекции этой директории:

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

Удаление всех файлов

Чтобы удалить файлы во всех директориях, пройдитесь по кэшу и вызовите метод clearAll() к каждой коллекции данных:

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

Удаление всех директорий

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

Перезагрузка данных

Перезагрузка файлов текущей директории

Чтобы перезагрузить файлы текущей директории, вызовите метод refresh() у сервиса Local с текущем path в качестве параметра:

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

Перезагрузка всех директорий

Чтобы перезагрузить дерево папок, нужно вызвать метод folders у сервиса Local и передать ему true в качестве аргумента:

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

Related sample:  File Manager: Data Operations

Обратите внимание, что если метод вызвать без параметра, он возвратит текущую структуру директорий.

Наверх