Компонент File

🌐 Цей документ доступний українською та англійською мовами. Використовуйте перемикач у правому верхньому куті, щоб змінити версію.

1. Опис компонента

Компонент File є елементом інтерфейсу, який дозволяє користувачам завантажувати або скачувати файли у формі. Form.io не розміщує жодних завантажених файлів у формах. Натомість файли зберігаються у постачальника сховища, в нашому випадку у digital-document-service.

В admin portal немає доступу до digital-document-service.
Використовуйте File з переліку Оновлених компонентів.

2. Основні функції

Компонент File підтримує велику кількість опцій для застосування при взаємодії із формою процесу, які розподілені за вкладками.

  • Display

  • File

  • Data

  • Validation

  • API

  • Conditions

  • Logic

  • Table

  • Label: назва компонента, яка відображається поряд з ним.

  • Label Position: визначає положення назви відносно компонента (верх, праворуч, зліва, або внизу).

    • Для опцій Left (Left-aligned), Left (Right-aligned), Right (Left-aligned), Right (Right-aligned).

      • Label Width: встановлює ширину яку займає Label у відсотках відносно input.

      • Label Margin: встановлює відступ між Label та input у відсотках.

  • Description: опис компонента, який може допомогти користувачам зрозуміти його призначення.

  • Tooltip: текст, який відображається при наведенні курсора на компонент.

  • Tab Index: html атрибут який дозволяє контролювати навігацію по полям вводу за допомогою клавіатури. Детальніше можна почитати про нього в документації по html наприклад тут.

  • Hidden: поля, які приховані від користувача, але все ще є частинами форми й будуть передані при відправленні форми. Не забудьте прибрати прапорець в Clear when hidden, інакше будь-яке значення цього компонента буде порожнім.

  • Disabled: забороняє редагування.

  • Display as image(s): замість назви завантаженого файлу у вікні буде відображатися зображення.

  • File Pattern: вказує, які розширення файлів дозволено завантажувати. Файли, не вказані в цьому полі, будуть заборонені для завантаження.

  • File Minimum Size: встановлює мінімальний розмір файлу. Значення має бути додатнім числом, з крапкою в якості розділового знаку у випадку десяткових дробів, з одиницями виміру В, КВ, МВ чи GB (значення без одиниці виміру буде читатися у байтах) та не перевищувати значення поля «File Maximum Size».

  • File Maximum Size: встановлює максимальний розмір файлу. Значення має бути додатнім числом, з крапкою в якості розділового знаку у випадку десяткових дробів, з одиницями виміру В, КВ, МВ чи GB (значення без одиниці виміру буде читатися у байтах) та не перевищувати значення за замовчуванням, яке встановив адміністратор реєстру».

  • Minimum total size: встановлює мінімальний розмір файлів. Значення має бути додатнім числом, з крапкою в якості розділового знаку у випадку десяткових дробів, з одиницями виміру В, КВ, МВ чи GB (значення без одиниці виміру буде читатися у байтах) та не перевищувати значення поля «Maximum total size». Відображається після активації Multiple Values.

  • Maximum total size: встановлює максимальний розмір файлів. Значення має бути додатнім числом, з крапкою в якості розділового знаку у випадку десяткових дробів, з одиницями виміру В, КВ, МВ чи GB (значення без одиниці виміру буде читатися у байтах) та не перевищувати значення за замовчуванням, яке встановив адміністратор реєстру». Відображається після активації Multiple Values.

  • Multiple Values: дозволяє вибрати декілька значень.

  • Clear value when hidden: дозволяє налаштувати очищення значення компоненту, коли компонент стає прихованим на сторінці.

  • Custom default value: дозволяє налаштувати власне, користувацьке значення за замовчуванням для компонента. У цій функції використовується JS вставка. Детальніше про JS вставки.

    • JavaScript: налаштовуйте власне значення за до допомогою javascript

    • JSONLogic: налаштовуйте власне значення за до допомогою JSONLogic.

  • Calculated value: дозволяє обчислювати значення компонента на підставі інших даних або умов. На відміну від Custom default value, значення поля буде обчислюватись кожного разу, коли відбуваються будь-які зміни на формі - користувач вводить данні, завершуються за http запити. У цій функції використовується JS вставка. Детальніше про JS вставки.

    • JavaScript: налаштовуйте власне значення за до допомогою javascript

    • JSONLogic: налаштовуйте власне значення за до допомогою JSONLogic.

  • Required: поле обов’язкове для заповнення перед відправленням форми.

  • Resource for validation: вказує який ресурс буде використовуватися для валідації файлу, це поле відображається коли користувач вказав розширення файлу *.csv в File Pattern.

  • Custom error message: спеціальне повідомлення про помилку, яке відображається, коли дані не проходять валідацію.

  • Custom validation: власна валідація, яка дозволяє вам створити специфічні для ваших потреб перевірки на валідність. У цій функції використовується JS вставка. Детальніше про JS вставки.

  • Property Name: ім’я поля в структурі даних, яка буде відправлена при відправці даних форми. Також це ім’я поля в структурі даних яким предзаповнюється форма. Поточне значення цього поля можна перевірити в структурі даних, яка відображається на вкладці Запит в інтерфейсі розробки форм.

  • Advanced Conditions: дозволяють вам налаштовувати складні умови для компонента. Ці умови визначають, коли компонент стає, наприклад. видимим, базуючись на інших компонентах або їх значеннях на формі.

    Ця функція використовує JS-вставки. Детальніше про це див. на сторінці JS-вставки.

  • Simple: виконує тіж самі задачі, що і Advanced Conditions, але дозволяє задати умови в більш простому форматі

Unresolved include directive in modules/registry-develop/pages/bp-modeling/forms/components/file/file.adoc - include::general/common-descriptions/logic/index.adoc[]

  • Table View: визначає, чи відображувати елемент в таблиці та в EditGrid.

  • Table column width: дозволяє налаштовувати ширину стовпця у таблиці, яка відображається під час використання компонента в EditGrid.

  • Sort As Number: визначає, чи сортувати значення як строку або як число при використані компонента в EditGrid.

2.1. Формат даних

Submission
 // дані отримані від digital-document-service, після завантаження файлу
[
    {
        checksum: "61b7aeab944b33b867550c4c4d94d66620228ea1094ed2dedb5003cc43807201",
        id: "f8ef4f2b-c37c-49a5-ba9a-a04c51507240"
    }
]