Уведомления о загрузке файлов

iziToast — это лёгкая и гибкая библиотека для создания уведомлений в JavaScript, которая позволяет информировать пользователя о процессе загрузки файлов без необходимости внедрять сложные кастомные решения. Одной из ключевых возможностей является создание прогресс-уведомлений, которые отображают состояние загрузки.

Инициализация iziToast

Для начала необходимо подключить библиотеку:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

После подключения можно создавать уведомления с помощью метода iziToast.show().

iziToast.show({
    title: 'Загрузка файла',
    message: 'Файл загружается...',
    position: 'topRight',
    timeout: false, // Отключает автоматическое закрытие
    close: false
});

Ключевые моменты:

  • timeout: false позволяет уведомлению оставаться на экране до завершения загрузки.
  • close: false скрывает кнопку закрытия, чтобы пользователь не прерывал процесс загрузки вручную.
  • position регулирует место отображения уведомления.

Создание прогресс-бара для загрузки

Для отображения динамического прогресса используется опция progressBar. Ее можно обновлять программно в зависимости от фактического состояния загрузки.

let toast = iziToast.show({
    title: 'Загрузка файла',
    message: 'Начало загрузки...',
    position: 'topRight',
    timeout: false,
    progressBar: true
});

function updateProgress(progress) {
    // progress в диапазоне 0-100
    toast.progress(progress);
    if(progress === 100){
        iziToast.success({
            title: 'Готово',
            message: 'Файл успешно загружен',
            position: 'topRight'
        });
        toast.hide();
    }
}

Особенности:

  • toast.progress(value) динамически обновляет прогресс-бар.
  • По завершении загрузки можно использовать toast.hide() для удаления уведомления.
  • iziToast.success() позволяет показать финальное уведомление об успешной загрузке.

Интеграция с загрузкой файлов

Для интеграции с реальной загрузкой можно использовать XMLHttpRequest или fetch с FormData.

function uploadFile(file) {
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    formData.append('file', file);

    let toast = iziToast.show({
        title: 'Загрузка файла',
        message: '0% завершено',
        position: 'topRight',
        timeout: false,
        progressBar: true
    });

    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            let percent = Math.round((e.loaded / e.total) * 100);
            toast.progress(percent);
            toast.setMessage(`${percent}% завершено`);
        }
    });

    xhr.onl oad = function() {
        if (xhr.status === 200) {
            toast.hide();
            iziToast.success({
                title: 'Успех',
                message: 'Файл загружен',
                position: 'topRight'
            });
        } else {
            toast.hide();
            iziToast.error({
                title: 'Ошибка',
                message: 'Не удалось загрузить файл',
                position: 'topRight'
            });
        }
    };

    xhr.open('POST', '/upload');
    xhr.send(formData);
}

Особенности реализации:

  • xhr.upload.addEventListener('progress', ...) позволяет отслеживать прогресс загрузки.
  • Метод toast.setMessage() обновляет текст уведомления в реальном времени.
  • Обработка статуса запроса обеспечивает уведомления о завершении или ошибке загрузки.

Кастомизация уведомлений о загрузке

iziToast позволяет гибко настраивать внешний вид и поведение уведомлений:

  • Цветовые схемы: backgroundColor, titleColor, messageColor.
  • Иконки: icon или iconText для отображения статуса (например, значок загрузки или галочка после завершения).
  • Анимации: animateInside и transitionIn/Out позволяют задать плавное появление и скрытие.
iziToast.show({
    title: 'Загрузка файла',
    message: 'Идёт процесс...',
    position: 'topRight',
    timeout: false,
    progressBar: true,
    backgroundColor: '#333',
    titleColor: '#fff',
    messageColor: '#ddd',
    icon: 'fa fa-upload',
    animateInside: true
});

Преимущества кастомизации:

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

Обработка нескольких файлов одновременно

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

Array.from(files).forEach(file => {
    uploadFile(file);
});

Каждое уведомление получает свой прогресс-бар и финальное уведомление об успешной загрузке или ошибке.

Дополнительные возможности

  • Авто-скрытие после завершения: Можно использовать timeout: 2000 после завершения загрузки.
  • Пользовательские кнопки: Добавление кнопки Отменить через buttons позволяет прерывать загрузку.
  • Глобальные настройки: Метод iziToast.settings() позволяет задавать дефолтные параметры для всех уведомлений в приложении, например, позицию или анимацию.
iziToast.settings({
    timeout: 5000,
    position: 'topRight'
});

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

Хотите, я могу подготовить расширенный пример с полностью функциональным интерфейсом загрузки файлов с прогресс-баром и кнопкой отмены для каждого файла?

Оглавление