Решение: имя файла не отображается в Bootstrap 4 input

Быстрый ответ

Чтобы отображать имя выбранного файла в Bootstrap 4, вам потребуется класс custom-file. Присвойте вашему полю для ввода класс custom-file-input и сопоставьте его с классом custom-file-label. В качестве иллюстрации ниже представлен код, отображающий имя выбранного файла:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="fileInput">
  <label class="custom-file-label" for="fileInput">Выберите файл</label>
</div>

<script>
document.getElementById('fileInput').addEventListener('change', function() {
  var fileName = this.files[0].name;  
  var labelNextToInput = this.nextElementSibling;
  labelNextToInput.innerText = fileName;  
});
</script>

JavaScript отслеживает изменение поля выбора файла и обновляет метку новым именем файла при его выборе.

Работа с множественным выбором файлов 📁

Если предоставляется возможность выбрать несколько файлов, объединяйте их имена. Для этой цели удобно использовать методы .map и .join в JavaScript. Добавьте атрибут multiple в элемент ввода, чтобы разрешить множественный выбор:

<input type="file" multiple class="custom-file-input" id="fileInput">

И модифицированный JavaScript-код для работы с несколькими файлами:

document.getElementById('fileInput').addEventListener('change', function() {
  var namesOfFiles = Array.from(this.files).map(file => file.name).join(', ');
  this.nextElementSibling.innerHTML = namesOfFiles;
});

Делегирование событий на помощь! 🦸‍♂️

При динамическом добавлении полей ввода файлов в DOM устанавливайте обработчики событий через делегирование, привязывая их к родительскому элементу:

document.body.addEventListener('change', function(event) {
  if (event.target.matches('.custom-file-input')) {
    var namesOfFiles = Array.from(event.target.files).map(file => file.name).join(', ');
    event.target.nextElementSibling.innerHTML = namesOfFiles;
  }
});

Таким образом, даже для элементов, добавленных после загрузки страницы, будет корректно отображаться имя файла.

Прелести простого кода

Для оптимизации избегайте ненужной сложности и учитывайте совместимость с Bootstrap 4. Вот пример как можно упростить код:

document.querySelector('.input-group').addEventListener('change', function(event) {
  if (event.target.classList.contains('custom-file-input')) {
    event.target.nextSibling.querySelector('.custom-file-label').textContent =
      event.target.files[0].name;
  }
});

Прощай, поддельный путь Chrome! 🚫

Chrome добавляет несуществующий путь к имени файла в целях безопасности. Этот путь можно удалить следующим образом:

var actualFileName = file.replace('C:\\fakepath\\', '');

Визуализация

Элемент выбора файла можно сравнить с почтовым ящиком. В стандартном интерфейсе выбранный файл сразу виден, в то время как в Bootstrap 4 этого не происходит. Применив CSS, можно "снять вуаль" и визуализировать имя файла:

.bootstrap-file-input .custom-file-label::after {
    content: "✉️🔍";
}

Теперь имя файла сразу видно:

Дополнительные особенности

При разработке элемента выбора файла учитывайте следующее:

• Отлов ошибок: Будьте готовы к тому, что могут произойти сбои или быть выбраны неподходящие типы файлов. Подсказки для пользователя – ключевой аспект.
• Доступность: Элементы ввода должны быть доступны для всех пользователей. Правильное оформление подписей и возможность навигации с помощью клавиатуры важны.
• Стандарты дизайна: Учтите общий стиль вашего веб-сайта.
• Безопасность: Используйте проверку и очистку файлов на серверной стороне. Не полагайтесь только на валидацию со стороны клиента.

Полезные материалы

1. Формы в Bootstrap — на странице официальной документации Bootstrap содержится описание стилизации поля для файлов.
2. Пример на Codepen — demonstrация стилизованного элемента выбора файла в Bootstrap 4.
3. Руководство на DigitalOcean — подробное пошаговое руководство по настройке поля для выбора файла в Bootstrap.