Drag&Drop файлов в HTML input: совместимость и подсказки

Быстрый ответ

Создайте область для перетаскивания файла на элемент загрузки файлов HTML. Для этого используйте отслеживание событий dragover и drop в JavaScript. Вот короткий и понятный способ реализации:

// Получаем элемент ввода файла и область перетаскивания
var fileInput = document.getElementById('fileInput');
var dropArea = document.getElementById('dropArea');

// Обрабатываем событие наведения курсора мыши
dropArea.addEventListener('dragover', e => {
  e.preventDefault();
  dropArea.classList.toggle('active', true); // Визуально выделяем область перетаскивания
});

// Обрабатываем событие отпускания файла
dropArea.addEventListener('drop', e => {
  e.preventDefault();
  dropArea.classList.toggle('active', false); // Убираем визуальное выделение
  fileInput.files = e.dataTransfer.files; // Присваиваем файлы элементу ввода
});

Вот HTML-разметка с областью для перетаскивания и скрытым элементом ввода файлов:

<div id="dropArea">Перетащите файлы сюда.</div>
<input type="file" id="fileInput" hidden>

Таким способом вы сможете направлять файлы, перетащенные пользователем, непосредственно на элемент загрузки — это весьма удобно для пользователя.

Давайте добавим юзабилити?

Не забудьте заинтересовать пользователя, внесите CSS-переходы для эффектов наведения на область перетаскивания. Пользуйтесь псевдоклассами, например :valid, для стилизации валидного поля ввода. Также предложите различные механизмы выбора файлов — например, кнопки или div-элементы, которые имитируют клик по скрытому инпуту.

Основные принципы

Учтите поддержку обработки нескольких файлов. Убедитесь, что ваше решение корректно отрабатывает во всех популярных браузерах — Chrome, Firefox, IE10+ и Safari. Разнообразьте интерактивные эффекты. В частности, пусть элемент ввода сопровождает движение курсора, это сделает интерфейс более интуитивным.

Область для перетаскивания должна быть подготовлена к ограниченной загрузке файлов на страницу или в определённую её часть. Подготовьте также обработку загрузок со стороны сервера.

Баланс и контроль

Проверьте поддержку браузерами HTML5, и предложите альтернативные механизмы для старых или не поддерживающих HTML5 браузеров. Избавьте опытных пользователей от ненужного JavaScript для более быстрого и эффективного взаимодействия.

Визуализация

Опишем файл как бумажный самолётик (📄✈️), и давайте представим, что он направляется в почтовый ящик HTML-формы (📫):

Перед перетаскиванием:
📄✈️    ➡️️ 🚫📫

Во время перетаскивания:
📄✈️ ✈️ ✈️ ➡️️ ✅📫

После перетаскивания:
🚪📫 (📄✈️ внутри)

Помогите вашему 📄✈️ долететь до 📫 — и загрузка будет проведена успешно!

**Элемент формы:**  [___📫___]
**Ваш файл:**         📄✈️
**Действие:**         Наведите 📄✈️ на 📫
**Результат:**       Файл успешно загружен!

Подумайте о будущем: доступность и проработка UX

Создайте визуально понятную область проветаскивания. Используйте описательный контент и визуальные сигналы, добавьте текстовые пояснения для пользователей с нарушением совей слуха. Выделяйте статус активности области перетаскивания в момент перемещения файла.

В завершение: безопасность и производительность

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

Полезные материалы

1. HTML Drag and Drop API – Web APIs | MDN — документация и примеры на HTML Drag and Drop API.
2. How To Create a Draggable HTML Element — туториал о создании перетаскиваемых HTML/CSS/JS элементов.
3. Read files in JavaScript | Articles | web.dev — руководство по чтению файлов в JavaScript, что наиболее важно при работе с перетаскиванием файлов.
4. Drag and Drop File Uploading | CSS-Tricks — актуальное руководство по реализации перетаскивания файлов для загрузки.
5. HTML Standard — официальный стандарт механизма загрузки файлов для HTML.
6. Drag and drop file input and handling — обсуждение на Stack Overflow со множеством примеров и решений.
7. GitHub – mailru/FileAPI: FileAPI — a set of javascript tools for working with files — JavaScript-библиотека для реализации множественной загрузки и перетаскивания файлов.