Кастомизация поля input type file, свой внешний вид

Задача: Поле input type="file" предоставляет возможность загрузки файлов на веб-странице. Однако стандартный вид этого элемента не всегда соответствует дизайну сайта. В данной статье мы рассмотрим методы кастомизации этого поля с использованием CSS и JavaScript.

Кастомизация с помощью CSS и JavaScript

Для изменения внешнего вида и поведения поля input type="file" мы воспользуемся следующими шагами:

Скрытие стандартного элемента и создание кастомного интерфейса:
Мы скроем стандартный элемент input type="file" с помощью CSS и создадим собственный интерфейс, используя контейнер и метку (label). Контейнер будет содержать текст и метку, которая будет выглядеть как кнопка для выбора файла.

<div class="custom-file-upload">
     <span>Файл для аватарки</span>
     <label for="file" id="file-label">
          Прикрепить фото
     </label>
     <input type="file" id="file" class="hidden" name="PREVIEW_PICTURE" maxlength="25" autocomplete="off" value="">
</div>

Стилизация элементов с использованием CSS:
Мы применяем стили к созданным элементам, чтобы они выглядели и вели себя так, как нам нужно.

.custom-file-upload {
    display: inline-block;
    position: relative;
}

.custom-file-upload label {
    height: 60px;
    background: var(--c_blue_light_bg);
    outline: 0;
    border: 0;
    width: 100%;
    border-radius: var(--radius10);
    font-family: inherit;
    cursor: pointer;
}

.custom-file-upload input {
    display: none;
}

В данном примере, мы устанавливаем определенные стили для контейнера и метки, чтобы они выглядели как кнопка. Также мы скрываем стандартный input с помощью display: none;.

Добавление обработчика события при выборе файла:
Мы используем JavaScript, чтобы добавить обработчик события, который будет вызван при выборе файла пользователем. Этот обработчик обновит текст метки с названием выбранного файла.

document.getElementById('file').addEventListener('change', function() {
    var filename = this.files[0].name;
    document.getElementById('file-label').innerText = filename;
});

Этот скрипт получает элемент с id file, добавляет к нему слушатель события change, и при изменении вызывает функцию, которая обновляет текст метки с названием файла. Сам label можно как угодно кастомизировать, с помощью css, под дизайн вашего сайта