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

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

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

Смотрите папку models исходного кода, чтобы познакомиться с сигнатурами методов.

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

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

Загруженные директории хранятся в коллекциях данных. Чтобы получить коллекцию, вызовите метод 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

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

Наверх
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.