Загрузка папки через Drag-Drop в HTML5: возможно ли?

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

HTML5 поддерживает загрузку папок через функцию drag-and-drop. Для этого используется элемент <input type="file"> с атрибутами webkitdirectory и directory. Это предоставляет пользователям возможность выбора и загрузки папок целиком:

<input type="file" webkitdirectory directory multiple />

Для обработки события drop, следует обойти объект dataTransfer.items, применяя метод webkitGetAsEntry для доступа к перетаскиваемым папкам:

document.addEventListener('drop', event => {
  event.preventDefault();
  let items = event.dataTransfer.items;
  for (let i = 0; i < items.length; i++) {
    let entry = items[i].webkitGetAsEntry();
    if (entry) {
      handleEntry(entry);
    }
  }
});

Рекомендуется проверять поддержку webkitdirectory различными браузерами, поскольку в их реализациях могут быть отличия.

Механизм: Детальный анализ события drop

При срабатывании события drop, когда пользователь перетаскивает папку, выполняются следующие действия:

Отмена стандартного поведения: Это дает возможность вмешаться и управлять данными с помощью кастомных обработчиков:

event.preventDefault();

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

Алгоритм "поиск в ширину" для чтения директорий: Существует необходимость синхронизировать асинхронные вызовы readEntries для последовательного чтения содержимого папок.

Применение async/await: Облегчает управление процессов обхода и обработки директорий.

Учет специфики браузеров: Важно принимать во внимание ограничение readEntries на количество элементов, читаемых одновременно, особенно если в папках содержится более 100 объектов.

Продвинутое управление файлами и папками

FileReader API: Для чтения содержимого файлов используется FileReader API, который позволяет выполнять чтение файлов асинхронно.

Определение файлов и директорий: В процессе обхода содержимого важно правильно различать файлы и папки для их корректной обработки:

if (entry.isFile) {
  // Обработка файла
} else if (entry.isDirectory) {
  // Обработка папки
}

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

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

Загрузку папок в HTML5 можно изобразить как переезд в цифровое пространство:

Отправка посылки:

📁 Перенесите вашу 📂 на панель 📤.

Что внутри:

💌 Ваши папки и файлы сохраняют свою структуру и порядок.

Статус доставки:

📬 Перетаскивание и отпускание над веб-страницей передает весь контент 📄🖼📁 на новое место, не оставляя ничего позади!

Остерегайтесь подводных камней: Решение предполагаемых проблем и сложностей

Подробнее об этом расскажет наш спикер на видео

Управление размерами файлов и обработка скрытых файлов

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

Браузерный лабиринт: совместимость и специфичность API

Функция загрузки папок вначале была доступна в Chrome начиная с 21 версии и с тех пор появилась во многих современных браузерах. Из-за специфики webkitGetAsEntry следует обращать внимание на обновления в API и проводить тестирование.

Пакеты утилит и плагины к вашим услугам

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

Пример, иллюстрирующий процесс

Ниже представлен образец обработки чтения папок и файлов с использованием Promises:

function handleEntry(entry) {
  if (entry.isFile) {
    entry.file(file => {
      // Обработка файла
    });
  } else if (entry.isDirectory) {
    const dirReader = entry.createReader();
    let readEntries = () => {
      dirReader.readEntries((entries) => {
        if (entries.length) {
          entries.forEach(handleEntry);
          readEntries(); // продолжение чтения
        }
      });
    };
    readEntries();
  }
}

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

1. Чтение файлов в JavaScript | web.dev — обзор Filesystem API для работы с файлами.
2. HTML Drag and Drop API – Web APIs | MDN — детали HTML Drag and Drop API.
3. Как создать загрузчик файлов drag-and-drop с использованием Vanilla JavaScript — Smashing Magazine — урок по созданию загрузчика файлов drag-and-drop.
4. HTML Стандарт — информация о Drag and Drop в HTML5.
5. Can I use... Support tables for HTML5, CSS3, etc — таблица поддержки HTML5 Drag and Drop.
6. Обнаружение папок/директорий в объектах FileList в JavaScript – Stack Overflow — обсуждение метода загрузки директорий.
7. Использование файлов в веб-приложениях – Web APIs | MDN — инструкция по использованию файлов в веб-приложениях.