Константин!

Один из способов — зафиксировать и растянуть область для загрузки файла на всё окно. Чтобы она не перекрывала всю страницу, можно скрыть её с помощью display: none, а показывать только при перетаскивании файлов:

#dropZone {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000; // Нужно поставить такой z-index, чтобы поле было самым верхним слоем
}

#dropZone.visible { display: block; }

Для этого добавим к документу обработчики событий dragenter и dragover:

const dropZone = document.getElementById('dropZone');

function showDropZone(e) { dropZone.classList.add('visible'); }

['dragenter', 'dragover'].forEach(event => { document.addEventListener(event, showDropZone, false); });

Область загрузки нужно скрывать, если курсор с перетягиваемыми файлами увели за пределы области, или «бросили» файлы в области:

function hideDropZone(e) {
  dropZone.classList.remove('visible');
}

['dragleave', 'drop'].forEach(event => { dropZone.addEventListener(event, hideDropZone, false); });

Чтобы браузер не открывал перетаскиваемые файлы и обрабатывал события корректно, заблокируем дефолтную обработку событий, связанных с перетаскиванием:

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

['dragenter', 'dragleave', 'dragover', 'drop'].forEach(event => { dropZone.addEventListener(event, preventDefaults, false); });

Для получения содержимого файлов, используем свойство dataTransfer события drop. Оно возвращает объект DataTransfer с файлами:

dropZone.addEventListener('drop', handleDrop, false);

function handleDrop(e) { const files = e.dataTransfer.files handleFiles(files) }

Ну а дальше загружаем файлы на сервер:

function handleFiles(files) {
  ([...files]).forEach(uploadFile)
}

function uploadFile(file) { const url = 'http://mysite.com/api';

  // Создаем объект данных формы FormData const formData = new FormData();

  // Присоединяем к данным формы файл formData.append('file', file);

// Отправляем данные формы на сервер fetch(url, { method: 'POST', body: formData }) .then(() => { // Успешная загрузка }) .catch((e) => { // Обработка ошибки }); }

Весь код полностью можно посмотреть в Кодсэндбоксе. Попробуйте перетянуть файлы в область с браузером.

Что ещё посмотреть

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы