Обход ограничений ввода файлов в Bootstrap 4

Bootstrap 4 предоставляет настраиваемый компонент ввода файлов, упрощающий выбор файлов для пользователей. Однако если вы хотите настроить текст заполнителя «Выбрать файл...» или отобразить имя выбранного файла, вы можете столкнуться с некоторыми проблемами.

Изменение заполнителей в Bootstrap 4.1 и более поздних версиях

Начиная с Bootstrap 4.1, текст-заполнитель находится в элементе custom-file-label. Вы можете переопределить его с помощью CSS:

.custom-file-label::after {
  content: "Select file...";
}

Настройка текста кнопки файла

Bootstrap 4.1 не предлагает простого метода изменения текста кнопки файла. Для этого рассмотрите возможность добавления специального стиля:

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

Отображение выбранного имени файла в Bootstrap 4.4

Bootstrap 4.4 позволяет отображать имя выбранного файла с помощью простого JavaScript:

document.querySelector('.custom-file-input').addEventListener('change', function(e) {
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})

Параметры Pre-Bootstrap 4.1:

Скрытие начального заполнителя:

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

Отображение выбранного имени файла:

$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})

Эти подходы обеспечивают гибкость в настройке компонента ввода файлов Bootstrap 4, позволяя адаптировать его к вашим конкретным требованиям.