Поле файла

Использование

<label class="inst-file">
  <input type="file">
  Выберите файл
  <span class="inst-file-hint">PNG или SVG, до 2 МБ</span>
</label>

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

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

Когда использовать

Состояния

<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

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

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

Что делает кит

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

Без скрипта зона работает: внутри настоящий <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

Связанное

Текстовое поле Форма Выбираемая карточка Мера Кнопка Сноска и баннер