Работа с файлами

В Лексеме файлы расположены в одном месте - в таблице [lex].[File]. Увидеть их можно выполнив скрипт

(“Вывод данных из таблицы lex.File”)

SELECT TOP (3) *
FROM [L84LexPractice].[lex].[File]
order by CDate desc

Поле id - ключевое поле, FileName - имя хранящегося файла, Content - сам файл.

Для выполнения задания нам понадобится отдельная форма. Создайте 2 файла:

FileDemoForm.xml

<Form writeRoles='Super' title='File Demo'>
  <ToolBar>
    <Tool id="toolBarItemExit" caption="Закрыть" image="current-theme/images/leftNavBar/close.png" clicked='toolBarItemExit_clicked'/>
  </ToolBar>
  <Layout type='bootstrap' >
    <Group id='gr1' editorWidth='12' >
    <Button value='Загрузить' id='ButtonUpload' captionWidth='0' editorWidth='1' width='100%' clicked='ButtonUpload_clicked' />
    </Group>
  </Layout>
</Form>

FileDemoForm.js

import { Form } from 'ecosoft-lexema8'; // импорт компонентов из библиотеки ecosoft-lexema8
import template from './FileDemoForm.xml'; // импорт макета документа
export default class FileDemoForm extends Form {
  constructor(...args) {
    super(...args);
  }
  // макет документа
  static get template() {
    return template;
  }
  toolBarItemExit_clicked() {
    this.close();
  }
  ButtonUpload_clicked() {}
}

и добавьте ссылку на форму в units.json

{
        "caption": "Файл",
        "key": "FileDemoForm",
        "form": "./forms/FileDemoForm"
      }

Результат:

Класс FileUpload

Для загрузки файла в Лексеме существует класс FileUpload. В нашей форме сделайте импорт класса FileUpload из библиотеки ядра лексемы и добавьте реализацию к событию нажатия на кнопку:

import { Form, FileUpload } from 'ecosoft-lexema8'; // импорт компонентов из библиотеки ecosoft-lexema8
...
export default class FileDemoForm extends Form {
...
  ButtonUpload_clicked() {
    FileUpload.choose({
      multiple: false
    }).done((x) => {
      console.log(x);
    }).fail(function(x) {
      console.log('error: ', x);
    });
  }
}

Нажмите на кнопку и выберите какой-нибудь файл. Результат работы можно увидеть в консоли браузера, это будет объект, который содержит id изображения в хранилище. Также его можно увидеть в самой таблице

SELECT id, FileName, Content
FROM [L84LexPractice].[lex].[File]
where id = ''скопированный из консоли id'

Такой подход позволяет вызвать загрузку файла из кода, в любой подходящий момент.

Контрол FileUpload

В макет формы добавьте элемент управления FileUpload:

<Break />
    <FileUpload id='FileUpload1' captionWidth='0' editorWidth='1' valueChanged='FileUpload1_valueChanged' />

и реализацию события:

FileUpload1_valueChanged(s, e) {
    console.log(this.controls.FileUpload1.fileId);
  }

Результат:

У данного элемента управления есть свойство fileId. Если оно пустое, то происходит загрузка файла в хранилище, и заполнение этого свойства id файла. Иначе, можно будет скачать файл из хранилища.

Так же данный элемент управления можно привязывать к свойству модели через bind (в модели тип свойства должен быть File).

Вывод изображения

В макет формы добавьте элемент управления

<Break />
    <CustomImage id="CustomImage1" editorWidth='6' valueChanged='CustomImage1_valueChanged' />

и реализацию события

CustomImage1_valueChanged({}, imageId) {
    console.log(imageId);
  }

Результат:

Загрузите изображение, в результате оно отобразится в элементе управления, а в консоли выведется id загруженного файла.

---