Войти

Компонент для загрузки файлов FileUploadComponent

Общая информация

Компонент предназначен для загрузки различных пользовательских файлов. Все загруженные файлы будут отправлены вместе с заявлением.

Каждый блок может содержать 1 или N файлов. Количество файлов настраивается в зависимости от услуги. Ограничение по количеству файлов и размеру мегабайт может быть установлено как в родительских атрибутах, так и в дочерних. Если в родительских не установлено ограничение — будет использоваться дефолтный объём 25 МБ, 10 штук файлов.

Блок может располагаться на отдельном экране, либо на одном экране, но с визуальным разделением блоков друг от друга. Расположение на одном или нескольких экранах зависит от того, есть ли ограничение на весь файловый загрузчик по количеству загружаемых файлов, или по объему загружаемых файлов:

  • Если ограничение есть — блоки на одном экране, если нет — на разных экранах;
  • Существует возможность валидации имени файла. Настройка данного функционала происходит через изменение атрибутов компонента;
  • Загруженные пользователем файлы проходят проверки: проверка типа, размера, на целостность (если это картинка), на максимальный объём и количество — как для общего числа файлов в услуге, так и для загрузчика, с которым в данный момент работает пользователь. Если на экране несколько загрузчиков файлов, то максимальный объём и количество считается по всем загрузчикам на экране.

Поддерживаемые экраны

Компонент может быть задействован на экранах типа: 

Внешний вид компонента

В услуге

скрин1_fileupload.png

В конструкторе

Структура компонента FileUploadComponent

ВКУ

JSON

 

В конструкторе

Атрибут

Тип

Описание

1

Идентификатор компонента

id

string

Уникальный идентификатор компонента в JSON

2

Удобочитаемое имя компонента

   

Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент

3

Заголовок компонента

label

string

Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле

4

Поле является обязательным для заполнения?

required

boolean

Признак обязательности загрузки файла в компоненте. По умолчанию (если флаг снят) загрузка файла в компоненте не обязательна. При выставлении флага required в значение true загрузка файла в компоненте становится обязательной

5

Скрытие оставшегося объема загрузки файлов

hideTotalAvailableCount

boolean

true — не отображать, false — отображать.

true — выставлен по умолчанию. 

6

Скрытие оставшегося количества загружаемых документов

hideTotalAvailableSize

boolean

true — не отображать, false — отображать. true — выставлен по умолчанию

7

Максимально возможный объём загрузки файлов

maxSize

int

Максимально возможный объем загрузки файлов в байтах

8

Максимально возможное количество файлов

maxFileCount

int

Максимально возможное количество загрузки файлов в рамках услуги

9

Типы файлов, которые нужно заворачивать в архив

archiveTypes

array

Иногда требуется заворачивать в архив файлы перед отправкой в террабайт, чаще всего это sig формат (формат ключа электронной подписи), для таких случаев — указываем атрибут и прописываем, какие файлы мы заворачиваем в архив

10

Массив загрузчиков

     

10.1

Уникальный идентификатор конкретного загрузчика

uploadId

Строка

Уникальный идентификатор загрузчика

10.2

Тип

   

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

10.3

Название

title

Строка

Название заголовка загрузчика

10.4

Дополнительный текст

label

Строка

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

10.5

Допустимые типы файлов

type

Массив

Задаёт массив допустимых типов

10.6

Наименование PDF-файла

pdfFileName

Строка

Атрибут задается, если необходимо приложить к заявлению файл формата pdf, в котором сливаются все загруженные в этом upload файлы, содержащие изображения (форматы jpeg/gif/png/bmp)

10.7

Вариации типов файлов и их количества

   

Задаётся кол-во файлов для заданного списка типов

10.8

Максимально возможный объем загрузки файлов

maxSize

Число

Максимально возможный объем загрузки файлов в рамках загрузчика

10.9

Минимальный размер файла

minSize

Число

Определяет минимальный размер файла в рамках загрузчика

10.10

Максимально возможное количество файлов

maxFileCount

Число

Максимальное кол-во файлов в загрузчике

10.11

Не сжимать файл при загрузке

notCompression

boolean

Атрибут, позволяющий не сжимать файл при загрузке, также остаются все данные фото, в т.ч. координаты, дата создания и так далее. При сжатии эти данные убираются. По умолчанию задано — false

10.12

Только для чтения

readonly

boolean

Ограничивает загрузчик только просмотром или скачиванием файлов

10.13

Тип валидации

validation

Массив

Валидирует название файла и выводит сообщение о ошибке, в случае, если валидация не пройдена

10.14

Необходимость проверки наличия файла

required

boolean

Предназначен для обязательности заполнения

10.15

Смежные загружаемые файлы

   

Информация дополнится

11

Пояснительные переходы

   

Создание модального окна (поп-ап)

12

Идентификатор подсказки/саджеста/suggest

suggestionId

String

Технология автозаполнения полей на основе данных, которые пользователь ранее вводил в поле услуги

13

Вычисляемые аргументы компонента (linkedValues)

attrs

object

Атрибуты компонента, позволяющие реализовать сложный функционал

Пример JSON структуры компонента передаваемой в DTO

"fu1": {

"visited": true,

"value": "... сериализованный объект - см. ниже ..."

},

{

  "id": "fu1",

  "type": "FileUploadComponent",

  "uploads": [

    {

      "uploadId": "passport",

      "value": [

        {

          "fileUid": 1888436138,

          "metaId": 1880206849,

          "objectId": 763969105,

          "objectTypeId": 2,

          "mnemonic": "fu1.FileUploadComponent.passport.0",

          "fileName": "1627908598888.jpg",

          "fileExt": "jpg",

          "fileSize": 318121,

          "mimeType": "image/jpeg",

          "hasSign": false,

          "created": "2021-08-08",

          "updated": "2021-08-08",

          "realPath": "39/0/0/0/0/0/377/441eqUTBY5kY",

          "deleted": false,

          "bucket": "epgu202108",

          "nodeId": "f_dc",

          "userId": 1000305286,

          "alternativeMimeTypes": [],

          "uploaded": true

        }

      ],

      "required": true

Варианты использования

Вариант реализации для случая с доверенностью

скрин2_fileupload.png


Авторизуйтесь, чтобы оставить комментарий к статье