Завантаження файлів

Використовуйте type="file", щоб відкрити діалог вибору файлів. Задайте accept для підказки про допустимі типи файлів і multiple для вибору кількох файлів. Перевіряйте типи й розміри файлів окремо.

#Приклади

<label>
  Вкладення
  <input type="file" name="attachment" />
</label>
<label>
  Зображення
  <input type="file" name="images" accept="image/*" multiple />
</label>

#Стани поля

Укажіть required, щоб вимагати файл під час надсилання форми. У разі помилки валідації задайте aria-invalid="true" і зв’яжіть поле з повідомленням через aria-describedby. Натисніть Tab, щоб побачити стиль фокуса.

<label>
  Обов’язкове вкладення
  <input type="file" required />
</label>
<div>
  <label for="file-input-invalid">Неприпустиме вкладення</label>
  <input id="file-input-invalid" type="file" aria-invalid="true" aria-describedby="file-input-error" />
  <small id="file-input-error">Виберіть файл підтримуваного типу.</small>
</div>
<label>
  Завантаження недоступне
  <input type="file" disabled />
</label>

Для налаштування оформлення використовуйте токени полів вибору файлів.

#Класи розширень

У повній збірці trace-small і trace-large змінюють розмір поля та його нативної кнопки вибору файлу. Середній розмір застосовується типово.

<label>
  Малий
  <input type="file" class="trace-small" />
</label>
<label>
  Середній
  <input type="file" />
</label>
<label>
  Великий
  <input type="file" class="trace-large" />
</label>