Поле файла

Контракт

Само поле не спрятано display: none, а уведено в клип (clip-path) с размером 1×1: спрятанное через display или visibility поле выпадает из порядка обхода, и зона перестаёт достигаться клавиатурой.

Пунктир здесь — единственное место в библиотеке, где линия не сплошная, и это осознанно: другого настолько же понятного знака «сюда можно положить» нет.

Внутри зоны нативный input[type=file]: системный диалог, фильтр по accept и участие в форме приходят от платформы. Поле лежит в клипе, а не спрятано — display: none выбросил бы его из обхода. Tab ставит фокус на зону, Enter и Space открывают диалог, а кольцо рисуется вокруг всей зоны, а не вокруг невидимого поля 1×1.

Имя даёт текст-призыв внутри <label>; подсказка про формат читается следом, потому что тоже внутри.

Перетаскивание не единственный способ, и это главное: мышью, клавиатурой и через системный диалог зона достижима одинаково. Загрузка только перетаскиванием недоступна почти никому, кроме мыши. Сама зона узнаётся по пунктиру и значку, а не по цвету рамки, а сообщение о неверном формате даётся текстом рядом (сноской или баннером).

Состояния

<label class="inst-file">
  <input type="file">
  Перетащите файл или выберите
  <span class="inst-file-hint">До 20 МБ</span>
</label>
<label class="inst-file">
  <input type="file" disabled>
  Импорт отключён администратором
  <span class="inst-file-hint">Обратитесь к владельцу пространства</span>
</label>

Состояния «файл над зоной» в библиотеке нет: оно возникает только по событию перетаскивания, то есть по JS. Приложение вешает свой класс и красит им те же две переменные, что использует :hover.

Поведение

Для прогресса отправки берите меру, для отчёта об ошибке — баннер или сноску.

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, instrument.js работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="instrument.js"></script>

Что делает instrument.js

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

Без скрипта зона работает: внутри настоящий <input type="file">, и выбор через диалог доступен и мышью, и с клавиатуры.

Что должно сделать приложение

for (const type of ['dragenter', 'dragover']) {
  zone.addEventListener(type, (e) => {
    e.preventDefault();          // без этого браузер откроет файл сам
    zone.dataset.over = '';
  });
}
for (const type of ['dragleave', 'drop']) {
  zone.addEventListener(type, () => delete zone.dataset.over);
}

zone.addEventListener('drop', (e) => {
  e.preventDefault();
  input.files = e.dataTransfer.files; // тот же путь, что у диалога
  input.dispatchEvent(new Event('change', { bubbles: true }));
});

Перетащенное кладётся в тот же <input>. Отдельный список дал бы форме два источника файлов, и они разошлись бы на первой же отправке.

Композиции

В форме с подписью

<div class="inst-field">
  <span class="inst-label">Импорт списка получателей</span>
  <label class="inst-file">
    <input type="file" multiple accept=".json,.csv">
    Перетащите файлы или выберите
    <span class="inst-file-hint">До 20 МБ, форматы .json и .csv</span>
  </label>
</div>

Подпись здесь <span class="inst-label">, а не <label for>: обёртка зоны сама является <label>, и второй ярлык на то же поле дал бы два конкурирующих имени.

Сценарии

С отчётом о загрузке

<div class="inst-field">
  <span class="inst-label">Датасет</span>
  <label class="inst-file">
    <input type="file" accept=".csv">
    Перетащите файл или выберите
    <span class="inst-file-hint">CSV, до 100 МБ</span>
  </label>
  <div class="inst-meter-row"><span>terrain.csv</span><span class="inst-meter-value">62%</span></div>
  <div class="inst-meter" role="progressbar" aria-label="Загрузка terrain.csv"
       aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">
    <div class="inst-meter-fill" style="inline-size:62%"></div>
  </div>
</div>

API

Связанное

Текстовое полеФорма