Элементы

Загрузка файла

Зона для перетаскивания и выбора файлов: список с размером, проверка формата и размера, ошибки текстом. Поле файла остаётся в форме.

Примеры

<form action="#" method="post" enctype="multipart/form-data">
  <div class="field">
    <span class="field__label" id="up-l1">Фото профиля</span>
    <div class="upload" data-ui-upload data-ui-max-size="2MB">
      <input class="upload__input" type="file" id="up-avatar" name="avatar" aria-labelledby="up-l1" accept="image/png,image/jpeg" aria-describedby="up-avatar-h">
      <label class="upload__zone" for="up-avatar">
        <span class="upload__title">Перетащите файл сюда</span>
        <span class="upload__hint" id="up-avatar-h">или нажмите, чтобы выбрать. PNG или JPG, до 2 МБ.</span>
      </label>
      <ul class="upload__list" aria-live="polite"></ul>
      <div class="upload__error" role="alert" hidden></div>
    </div>
  </div>
</form>

<div class="field">
  <span class="field__label" id="up-l2">Материалы встречи</span>
  <div class="upload" data-ui-upload data-ui-max-size="10MB" data-ui-max-files="5">
    <input class="upload__input" type="file" id="up-docs" name="docs" aria-labelledby="up-l2" accept=".pdf,.pptx,.docx" multiple aria-describedby="up-docs-h">
    <label class="upload__zone" for="up-docs">
      <span class="upload__title">Выберите файлы или перетащите их</span>
      <span class="upload__hint" id="up-docs-h">PDF, PPTX, DOCX. До 5 файлов, каждый до 10 МБ.</span>
    </label>
    <ul class="upload__list" aria-live="polite"></ul>
    <div class="upload__error" role="alert" hidden></div>
  </div>
</div>

Установка

bukatchuk-ui add file-upload

Файлы

Клавиши

Макрос для Jinja

{#- Зона загрузки. accept — как у <input type="file">; max_size — «5MB»; hint — подсказка в зоне.
    Форма с файлами должна иметь enctype="multipart/form-data". -#}
{% macro file_upload(name, label, accept=None, multiple=False, max_size=None, max_files=None, hint=None, title='Перетащите файл сюда или нажмите, чтобы выбрать', required=False, id=None) -%}
{%- set uid = id or ('up-' ~ name) -%}
<div class="field">
  <span class="field__label" id="{{ uid }}-l">{{ label }}</span>
  <div class="upload" data-ui-upload{% if max_size %} data-ui-max-size="{{ max_size }}"{% endif %}{% if max_files %} data-ui-max-files="{{ max_files }}"{% endif %}>
    <input class="upload__input" type="file" id="{{ uid }}" name="{{ name }}"{% if accept %} accept="{{ accept }}"{% endif %}{% if multiple %} multiple{% endif %}{% if required %} required{% endif %} aria-labelledby="{{ uid }}-l"{% if hint %} aria-describedby="{{ uid }}-h"{% endif %}>
    <label class="upload__zone" for="{{ uid }}">
      <span class="upload__title">{{ title }}</span>
      {%- if hint %}<span class="upload__hint" id="{{ uid }}-h">{{ hint }}</span>{% endif %}
    </label>
    <ul class="upload__list" aria-live="polite"></ul>
    <div class="upload__error" role="alert" hidden></div>
  </div>
</div>
{%- endmacro %}