AppFiles - работа с файлами.
Модуль предназначен для организации хранения файлов. В случае хранения картинок в модуле предусмотрены элементы формы для их отображения.
Спонсор
lk24.pro - Разработка личных кабинетов
Подключение
AppServer
import { AppFiles } from 'katejs-modules';
...
const AppServer = parent => class Server extends use(parent, AppFiles) {
...
AppClient
import { AppFiles } from 'katejs-modules/lib/client';
const AppClient = parent => class Client extends use(parent, AppFiles) {
...
Использование
Модуль добавляет сущность Файл. В форме сущности есть возможность загрузить файл.
После загрузки, файл становится доступен по URL вида /api/files/{file uuid}/{file name}
который следует получать через метод приложения getFileUrl(uuid, fileName)
В случае, когда файл явяется картинкой, на форму можно добавить элемент ее отображения. Для этого, при определении структуры необходимо, добавить поле ссылку на сущность Файл и указать дополнительный атрибут - fileName
const Expense = {
fields: [
...
{
name: 'image1',
type: Fields.REFERENCE,
entity: 'File',
attributes: ['title', 'uuid', 'fileName'],
},
],
tables: [
{
name: 'images',
fields: [
{
name: 'image',
type: Fields.REFERENCE,
entity: 'File',
attributes: ['title', 'uuid', 'fileName'],
},
],
},
],
};
В форме для создания элемента автоматического отображения выбранного файла картинки следует воспользоваться методом: AppFiles.getImageElement('fieldId', form)
Также можно добавить элемент превью картинки в табличную часть, добавив колонку методом: AppFiles.getImageTableElement('image', 'images', form)
Метод автоматически устанавливает картинку при загрузке и при изменении ссылки. Метод предполагает, что форма основана на автоматически сгенерированной, поэтому модифицированную форму следует делать класс-микином.
import { AppFiles } from 'katejs-modules/lib/client';
export default ItemForm => class ExpenseItem extends ItemForm {
static doc = true;
constructor(args) {
super(args);
...
this.elements.push(AppFiles.getImageElement('image1', this));
...
const imagesTable = this.elements.get('images');
imagesTable.columns.push({
...AppFiles.getImageTableElement('image', 'images', this),
width: `15%`,
});
}
}