Константин!
Один из способов — зафиксировать и растянуть область для загрузки файла на всё окно. Чтобы она не перекрывала всю страницу, можно скрыть её с помощью 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) => {
// Обработка ошибки
});
}
Весь код полностью можно посмотреть в Кодсэндбоксе. Попробуйте перетянуть файлы в область с браузером.
Что ещё посмотреть
Похожий пример реализации загрузки файлов в Смэшинг Магазин;
Библиотека jQuery File Upload.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.