Как задействовать компоненту “Загрузка файла” на странице?
Постановка задачи: необходимо реализовать на пользовательской странице “Карточка Проекта” загрузку файлов, являющихся сканированными приложениями к проекту (расширения png, jpeg, jpg).
Для настройки компоненты Загрузка файла потребуются следующие данные:
-
надпись поля - Файлы-вложения
-
максимальный размер каждого файла - 10 Мб
-
допустимо удаление файла - удаление разрешено
-
список допустимых типов файлов -png, jpeg, jpg
-
допустимое максимальное количество файлов в компоненте - 10 и отдельным случаем рассмотреть - единственный 1 файл
-
главная сущность графа основной формы-таблица projects.project_id
-
главная сущность графа компоненты - таблица project_attachments
-
колонка-внешний ключ из таблицы вложений в таблицу проектов -project_attachments.project_id
-
колонка с именем файла вглавной сущности графа компоненты-project_attachments.attachment_file_path
-
колонка с содержимым файлав главной сущности графа компоненты -project_attachments.file
-
для случая с единственным файлом: колонка с именем файла в главной сущности графа основной формы-projects.attachment_file_path
-
для случая с единственным файлом: колонка с содержимым файлав главной сущности основной формы -projects.file
Страница “Карточка Проекта” должна иметь следующие настройки:
- в качествеглавной сущности компонентыФормадолжна быть назначена таблица “Проекты”(projects).
- внутри родительской компоненты-контейнераФормавсей страницы следует расположить компоненту “Загрузка файла”.
- внутри родительской компоненты-контейнераФормавсей страницы следует расположить другие компоненты, например, Текстовое поле для сохранения иных параметров сущности “проект” (не входит в текущее задание).
- для случая, когда к одному проекту следует сохранить несколько вложений: вГраф сущностей компоненты Загрузка файлав качестве Главной сущности должна быть определена таблица вложений (project_attachments) .
- для случая, когда к одному проекту следует сохранить единственное вложение: вГраф сущностей компоненты Загрузка файлав качестве Главной сущности должна быть определена таблица Проектов (projects).
- установить должным образом связи между таблицами в параметрах компоненты.
Решение задачи:
- Добавляем ***основную компонентуФорма***, в структуру сущностей которой включаем таблицу projects. (рис.1)

рис.1. Добавление компоненты Форма на страницу
- Добавляем внутрь компоненты Формы компоненту Загрузка файла (рис.2)

рис.2. Добавление компоненты Загрузка файла на страницу
- Настраиваем основные параметры компоненты Загрузка файла (рис. 3)

рис.3. Настройка основных параметров компоненты Загрузка файла
- Настраиваем граф сущностей компоненты Загрузка файла (рис. 4)

рис.4. Настройка графа сущностей компоненты Загрузка файла.
Обращаем внимание, что при изменении настройки “Допустимое максимальное количество файлов”, появляется дополнительный параметр для указания внешнего ключа,
по которому связаны главная сущность компоненты Форма и главная сущность компоненты Загрузка файла
- Настраиваем взаимосвязи главной сущности графа компоненты Форма и главной сущности компоненты Загрузка файла (рис.5)

рис.4. Настройкавзаимосвязи главной сущности графа компоненты Форма и главной сущности компоненты Загрузка файла
Результат выполнения задачи:
После применения изменений на странице, в экранной форме пользовательского приложения, мы видим, что условия задачи соблюдены (рис.5,6)
|
|
|
|
|
рис. 5 Открываем карточку проекта. Переходим к компоненте Загрузка файла и указываем список файлов для прикрепления. Сохраняем карточку проекта. |
рис. 6 Открываем ту же карточку проекта на изменение. Прикрепленные на предыдущем шаге файлы отображаются в зоне предпросмотра. Крестик в верхнем углу файла позволяет удалить файл из списка прикрепленных. Нажатие мышкой по наименованию файла (представленного гиперссылкой) приводит к выкачивания файла браузером. |
Дополнительно отдельно рассмотрим случай сохранения единственного файла вложений в ту же таблицу, что и другие параметры сущности “проект” (а не в зависимую таблицу).
Возвращаемся к настройке графа сущностикомпоненты Загрузка файла (рис. 4а) и вместо зависимой таблицы project_attachments в качестве главной сущности компоненты Загрузка файла выбираем такую же таблицу, как у главной сущности компоненты Форма - projects.
- Изменяем параметр “Допустимое максимальное количество файлов” в значение “1” и настраиваем граф сущностей компоненты Загрузка файла (рис. 4а)
рис.4а Настройка графа сущностей компоненты Загрузка файла.
Обращаем внимание, что при изменении настройки “Допустимое максимальное количество файлов”, исчезает ранее настроенный дополнительный параметр для указания внешнего ключа,
по которому связаны главная сущность компоненты Форма и главная сущность компоненты Загрузка файла.
- Настраиваем взаимосвязи главной сущности графа компоненты Форма и главной сущности компоненты Загрузка файла (рис.5)
рис.4. Настройкавзаимосвязи главной сущности графа компоненты Форма и главной сущности компоненты Загрузка файла
Результат выполнения задачи для варианта с единственным прикрепляемым файлом:
После применения изменений на странице, в экранной форме пользовательского приложения, мы видим, что условия задачи соблюдены (рис.5а,6а)
|
|
|
|
|
рис. 5а Открываем карточку проекта. Переходим к компоненте Загрузка файла и указываем список файлов для прикрепления.
|
рис. 5б Компонента не позволяет прикрепить список файл и оставляет только один из выбранных. Сохраняем карточку с единственным прикрепленным файлом.
|

Рис. 6а Открываем ту же карточку проекта на изменение. Прикрепленный на предыдущем шаге единственный файл отображаются в зоне предпросмотра.
Крестик в верхнем углу файла позволяет удалить файл из прикрепленных.
Нажатие мышкой по наименованию файла (представленного гиперссылкой) приводит к выкачивания файла браузером.
image2019-3-6_14-58-30.png (image/png)
image2019-3-6_15-0-35.png (image/png)
image2019-3-6_15-1-20.png (image/png)
image2019-3-6_15-2-25.png (image/png)
image2019-3-6_15-2-59.png (image/png)
image2019-3-6_15-4-50.png (image/png)
image2019-3-6_15-5-36.png (image/png)
image2019-2-8_13-47-11.png (image/png)
image2019-2-8_13-48-18.png (image/png)
image2019-3-6_15-25-30.png (image/png)
image2019-3-6_15-25-56.png (image/png)
image2019-3-6_15-26-10.png (image/png)
image2019-3-6_15-26-26.png (image/png)
image2019-8-16_15-58-32.png (image/png)
image2019-8-16_16-6-18.png (image/png)
image2019-8-16_16-12-16.png (image/png)
image2019-8-16_16-15-47.png (image/png)
image2019-8-16_16-19-8.png (image/png)
image2019-8-16_16-21-48.png (image/png)
image2019-8-16_16-25-30.png (image/png)
image2019-8-16_16-28-47.png (image/png)
image2019-8-16_16-57-10.png (image/png)
image2019-8-16_17-3-51.png (image/png)
image2019-8-16_17-10-8.png (image/png)
image2019-8-16_17-20-1.png (image/png)
image2019-8-16_17-22-37.png (image/png)
image2019-8-16_17-22-57.png (image/png)



