Работа с сервером

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

File Manager ожидает бэкенд сервер для загрузки данных. Передайте ссылку на сервер через параметр url:

webix.ui({
  view: "filemanager",
  url:"http://localhost:3200/"
});

Вы можете скачать готовый бэкенд для File Manager.

Если у вас нет бэкенд сервера, вы можете кастомизировать методы сервиса Backend и предоставлять клиентские данные в виде промиса.

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

Динамическая загрузка

File Manager не загружает все данные сразу: только корневой элемент и изначально открытую папку.

Содержимое остальных директорий подгружается по необходимости (при открытии) и кэшируется.

Сервис Backend

Сервис Backend это серверная модель, у которой есть методы для запросов на сервер. Они вызываются сервисом Operations при необходимости загрузки или сохранения данных.

Ниже вы найдёте полный список методов.

Как кастомизировать модель Backend

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

создать свой бэкенд сервис и наследовать его от сервиса по умолчанию;
определять и переопределять методы;
использовать произвольный бэкенд сервис через свойство override.

class MyBackend extends fileManager.services.Backend {
    // новые методы 
}
 
webix.ui({
    view: "filemanager",
    url: "https://docs.webix.com/filemanager-backend/",
    override: new Map([[fileManager.services.Backend, MyBackend]]),
});

Запросы к бэкенд серверу

Вы можете отправлять AJAX запросы своему серверу:

class MyBackend extends fileManager.services.Backend {
    files(id) {
        return webix.ajax("//localhost:3200/files", { id })
            .then((data) => data.json());
    }
}

Доступ к удалённым URL

Вы можете обращаться к файлам на сервере:

class MyBackend extends fileManager.services.Backend {
    icon(type, name, size) {
        return `//localhost:3200/icons/${size || "small"}/image/jpg.svg`;
    }
}

Обработка клиентских данных

В случае необходимости вы можете вернуться клиентские данные промисом:

class MyBackend extends fileManager.services.Backend {
    getInfo() {
        return Promise.resolve({
            stats:{
                free: 52 * 1000 * 1000,
                total: 250 * 1000 * 1000,
                used: 198.4 * 1000 * 1000,
            }
        });
    }
}

Методы сервиса Backend

В этой секции вы найдёте детальное описание следующих методов:

copy()
directLink()
files()
folders()
getInfo()
getMeta()
getRootName()
icon()
makedir()
makefile()
move()
previewURL()
readText()
remove()
rename()
search()
upload()
url()
writeText()

url(path)

url() используется другими методами для подготовки URL к запросам на сервер.

Parameters:

path (string) - относительный путь.

Returns: абсолютный путь.

files(id)

Метод вызывается при открытии директории.

Parameters:

id (string) - ID текущей директории.

Returns: промис с массивом массивом файлов.

Request:

GET http://localhost:3200/files?id=%2Fnew%20directory

Response:

Сервер возвращает массив объектов файлов директории.

[
    {"value":"puppy.jpeg","id":"/new directory/puppy.jpeg",
        "size":0,"date":1584377524,"type":"image"},
    {"value":"text.txt","id":"/new directory/text.txt",
        "size":0,"date":1584377353,"type":"code"}
    // другие объекты
]

search(id, search)

Метод возвращает файлы и директории, названия которых соответствуют тексту поисковой строки.

Parameters:

id (string) - ID текущей директории;
search (string) - текст поисковой строки.

Returns: промис с массивом файлов и директорий.

Request:

GET http://localhost:3200/files?id=%2F&search=item

Response:

Сервер возвращает массив объектов файлов, названия которых соответствуют тексту поисковой строки. При отсутствии таковых, сервер возвращает пустой массив.

[
    {"value":"item.txt","id":"/item.txt","size":0,"date":1584627123,"type":"code"},
    // другие совпадения, если есть 
]

folders()

Метод вызывается при инициализации виджета и отображает все папки.

Request:

GET http://localhost:3200/folders

Response:

Сервер возвращает иерархию всех директорий.

[
  {"value":"new directory","id":"/new directory","size":0,"date":1584377524,
   "type":"folder"},
  {"value":"another directory","id":"/another directory","size":0,"date":1584376369,"type":"folder",
   "data":[
      {"value":"inner directory","id":"/another directory/inner directory","size":0,
      "date":1584376388,"type":"folder"}
   ]
  }
]

icon(obj[, size])

Возвращает путь к иконке на сервисе.

Parameters:

obj (object) - данные файла или директории
size (string, optional) - тип иконки (в случае нашего кода на Golang, это будут подпапки: "small" или "big")

Returns: строка URL.

Request:

GET http://localhost:3200/icons/small/code/txt.svg

URL включает в себя размер иконки (small/big), тип (code, image...) и расширение файла.

Response:

Сервер возвращает иконку.

Иконка каждого типа загружается один раз и после переиспользуется браузером по необходимости

upload()

Метод используется для загрузки файлов.

Returns: URL для загрузки файлов (по умолчанию, "http://localhost:3200/upload").

В случае ошибки, сервер возвращает объект со следующими данными:

{
  invalid: true, 
  err: "Some error message here"
}

readText(id)

Читает и возвращает содержимое текстового файла (type:"code").

Parameters:

id (string) - ID файла.

Returns: промис с содержимым текстового файла.

Request:

GET http://localhost:3200/text?id=%2Fitem.txt

writeText(id, content)

Метод сохраняет текстовый файл с новым содержимым на сервер.

Parameters:

id (string) - ID файла;
content (string) - новое содержимое файла.

Returns: промис с данными файла.

Request:

POST http://localhost:3200/text
Form Data
id: /write.txt
content: Привет, я текст :)

Response:

Сервер возвращает объект с данными файла.

{
  "value":"write.txt","id":"/write.txt","size":42,
  "date":1584632624,"type":"code"
}

directLink(id[, download])

Метод используется для просмотра и скачивания файла.

Parameters:

id (string) - ID файла;
download (boolean, optional) - передайте true, если хотите скачать файл; если хотите открыть файл во вкладке браузера - не передавайте параметры.

Returns: абсолютный путь.

Request:

GET http://localhost:3200/direct?id=%2Fimage.jpg&download=true

previewURL(obj, width, height)

Возвращает прямую ссылку к сгенерированному превью файла.

Parameters:

obj (object) - объект с данными файла;
width (number) - ширина изображения;
height (number) - высота изображения.

Returns: путь к превью файла.

Request:

GET http://localhost:3200/preview?width=464&height=407&id=%2Fimage.jpg

Response:

Сервер возвращает превью изображение.

remove(id)

Метод удаляет файл или директорию.

Parameters:

id (string) - ID файла/директории.

Returns: промис с ответом с сервера (успешно или ошибка).

Request:

POST http://localhost:3200/delete
Form Data
id: /data.js

В случае ошибки, сервер возвращает объект со следующими данными:

{
  invalid: true, 
  err: "Some error message here"
}

makedir(id, name)

Создаёт папку и возвращает объект с данными директории.

Parameters:

id (string) - ID родительской директории;
name (string) - название папки.

Returns: промис с данными папки.

Request:

POST http://localhost:3200/makedir
Form Data
id: /
name: University

Response:

Сервер возвращает объект с данными папки.

{
  "value":"New folder","id":"/New folder","size":0,
  "date":1584634921,"type":"folder"
}

В случае ошибки, сервер возвращает объект со следующими данными:

{
  invalid: true, 
  err: "Some error message here"
}

makefile(id, name)

Создаёт пустой файл и возвращает объект к данными файла.

Parameters:

id (string) - ID родительской директории;
name (string) - название папки.

Returns: промис с данными файла.

Request:

POST http://localhost:3200/makefile
Form Data
id: /
name: Poetry.txt

Response:

Сервер возвращает объект с данными файла.

{
  "value":"New file.txt","id":"/New file.txt","size":0,
  "date":1584635214,"type":"code"
}

В случае ошибки, сервер возвращает объект со следующими данными:

{
  invalid: true, 
  err: "Some error message here"
}

copy(id, to)

Метод копирует файл/папку.

Parameters:

id (string) - ID изначального файла/папки;
to (string) - ID новой родительской директории.

Returns: промис с объектом данных файла или папки.

Request:

POST http://localhost:3200/copy
Form Data
id: /Poetry.txt
to: /University

Response:

Сервер возвращает объект с данными файла или папки.

{
  "value":"write.txt","id":"/new directory/write.txt","size":42,
  "date":1584635434,"type":"code"
}

В случае ошибки, сервер возвращает объект со следующими данными:

{
  invalid: true, 
  err: "Some error message here"
}

move(id, to)

Метод перемещает файл или папку в новую директорию.

Parameters:

id (string) - ID файла/папки;
to (string) - ID новой родительской директории.

Returns: промис с данными файла или папки.

Request:

POST http://localhost:3200/move
Form Data
id: /Poetry.txt
to: /University

Response:

Сервер возвращает объект с данными файла или папки.

{
  "value":"move.txt","id":"/New folder/move.txt","size":0,
  "date":1584635665,"type":"code"
}

В случае ошибки, сервер возвращает объект со следующими данными:

{
  invalid: true, 
  err: "Some error message here"
}

rename(id, name)

Метод переименовывает файл/папку.

Parameters:

id (string) - ID файла/папки;
name (string) - новое название (в случае файлов должно включать расширение)

Returns: промис с объектом ID.

Request:

POST http://localhost:3200/rename
Form Data
id: /New file.txt
name: Renamed.txt

Response:

Сервер возвращает объект с ID файла и служебной информацией:

{
  "invalid":false,"error":"","id":"/Renamed.txt"
}

В случае ошибки, сервер возвращает объект со следующими данными:

{
  invalid: true, 
  err: "Some error message here"
}

getRootName()

Метод возвращает название корневой директории (строка. По умолчанию "My Files").

getMeta(obj)

Метод возвращает мета данные изображений, аудио и видео файлов (для большинства расширений: MP3, MP4, JPEG, и др.).

Parameters:

file (object) - данные файла.

Returns: промис с объектом мета тэгов (для изображений и аудио).

Request:

GET http://localhost:3200/meta?id=%2Fimage.jpg

Response:

Сервер возвращает объект с мета данными файла.

{
  "Title":"IAMX - Little Deaths","Artist":"IAMX",
  "Album":"Unfall","Year":"2017","Genre":"Electronic"
}

getInfo([force])

Метод возвращает данные корневой директории (общее, свободное и использованное пространство памяти; в байтах)

Parameters:

force (boolean, optional) - флаг для принудительного запроса.

Returns: промис с объектом характеристики вашей файловой системы.

Request:

GET http://localhost:3200/info

Response:

Сервер возвращает пару объектов.

Первый содержит статистику вашей файловой системы:

{
    stats: {
        free: 52000000,
        total: 250000000,
        used: 198400000
    }
}

Второй содержит типы файлов, для которых сервер может показывать превью контента и возвращать метаданные:

"features": {
    "preview": {
        "code": true,
        "document": true,
        "image": true
    },
    "meta": {
        "audio": true,
        "image": true
    }
}

Наверх