Загрузка файлов

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

Основы работы с модальными окнами для загрузки

Модальные окна Vex позволяют интегрировать форму загрузки файла в удобном и визуально привлекательном виде. Библиотека предлагает возможность отображать кастомизированные окна, которые могут включать как стандартные элементы формы, так и динамические компоненты, такие как индикаторы прогресса или кнопки отмены.

Создание модального окна с формой загрузки

Для начала нужно подключить саму библиотеку Vex. Это можно сделать с помощью следующего кода:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vex-js@latest/dist/css/vex.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vex-js@latest/dist/css/vex-theme-flat-attack.css">
<script src="https://cdn.jsdelivr.net/npm/vex-js@latest/dist/js/vex.combined.min.js"></script>

После этого можно приступить к созданию модального окна с элементами формы. Например, для загрузки файла используем следующий код:

vex.dialog.open({
  unsafeMessage: `
    <form id="upload-form">
      <input type="file" id="file-upload" name="file" required>
      <button type="submit">Загрузить файл</button>
    </form>
  `,
  className: 'vex-theme-flat-attack',
  callback: function (data) {
    if (data) {
      // обрабатываем отправку формы
      const fileInput = document.getElementById('file-upload');
      const file = fileInput.files[0];
      if (file) {
        uploadFile(file);
      }
    }
  }
});

Здесь используется функция vex.dialog.open, которая открывает модальное окно с HTML-разметкой для формы загрузки. Важный момент — атрибут unsafeMessage, который позволяет вставить HTML-разметку непосредственно в окно. Это предоставляет гибкость в создании интерфейса. При отправке формы будет вызвана функция обратного вызова, где происходит извлечение выбранного файла и его передача в функцию обработки загрузки.

Обработка файла и отправка на сервер

Для обработки файла после его выбора необходимо реализовать функцию отправки данных на сервер. Это можно сделать с помощью стандартного JavaScript или с использованием библиотек, таких как Axios или Fetch. Пример отправки файла через Fetch:

function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      alert('Файл успешно загружен');
    } else {
      alert('Ошибка при загрузке файла');
    }
  })
  .catch(error => {
    alert('Произошла ошибка при загрузке файла');
    console.error(error);
  });
}

В данном примере используется FormData для передачи файла на сервер в формате multipart. Сервер должен быть настроен на прием таких данных.

Добавление прогресса загрузки

Для улучшения пользовательского опыта можно добавить индикатор прогресса загрузки файла. Это можно сделать с помощью события progress при отправке запроса. Для этого потребуется немного изменить функцию uploadFile, добавив отслеживание прогресса.

function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);

  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      const percent = (event.loaded / event.total) * 100;
      updateProgressBar(percent);
    }
  });

  xhr.onl oad = function() {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.success) {
        alert('Файл успешно загружен');
      } else {
        alert('Ошибка при загрузке файла');
      }
    } else {
      alert('Ошибка при отправке данных');
    }
  };

  xhr.send(formData);
}

function updateProgressBar(percent) {
  const progressBar = document.getElementById('progress-bar');
  if (progressBar) {
    progressBar.style.width = percent + '%';
  }
}

Для отображения прогресса загрузки необходимо добавить элемент прогресс-бара в HTML-разметку модального окна:

<div id="progress-bar-container">
  <div id="progress-bar" style="width: 0; height: 20px; background-color: green;"></div>
</div>

В этой версии используется стандартный XMLHttpRequest, который позволяет отслеживать прогресс загрузки через событие progress на объекте xhr.upload.

Закрытие модального окна и очистка формы

После завершения загрузки важно закрыть модальное окно и очистить форму для предотвращения ошибок при последующих загрузках. Это можно сделать, вызвав метод vex.close() и сбросив форму.

xhr.onl oad = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    if (response.success) {
      alert('Файл успешно загружен');
    } else {
      alert('Ошибка при загрузке файла');
    }
  } else {
    alert('Ошибка при отправке данных');
  }

  vex.close();  // Закрытие модального окна
  document.getElementById('upload-form').reset();  // Очистка формы
};

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

Дополнительные возможности и кастомизация

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

Пример настройки окна с анимацией и изменением размеров:

vex.dialog.open({
  unsafeMessage: `
    <form id="upload-form">
      <input type="file" id="file-upload" name="file" required>
      <button type="submit">Загрузить файл</button>
    </form>
  `,
  className: 'vex-theme-flat-attack',
  height: 400,  // Изменение высоты окна
  width: 600,   // Изменение ширины окна
  animation: 'fade',  // Анимация появления
  callback: function (data) {
    if (data) {
      const fileInput = document.getElementById('file-upload');
      const file = fileInput.files[0];
      if (file) {
        uploadFile(file);
      }
    }
  }
});

Выводы

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