Как использовать функцию перетаскивания HTML5 с FileSystemAPI?

Question

Я использую FileSystemAPI window.showDirectoryPicker (), чтобы открыть каталог, который возвращает дескриптор этого каталога, и с его помощью я могу просматривать все файлы, присутствующие в этом каталоге.

      const dropArea = document.getElementById("drop_zone");
dropArea.onclick = async (evt) => {
  const dirHandle = await window.showDirectoryPicker();
  // Next lines of code using dirHandle 
};

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

Перешел по ссылке ниже, но у меня это не сработало.

https://developers.google.com/web/updates/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available#how_to_handle_dropped_folders

Буду признателен за любую помощь или информацию по этому поводу. Спасибо!

Answer 1

Интерфейсы HTML Drag and Drop позволяют веб-приложениям принимать перетаскиваемые файлы на веб-страницу. Во время операции перетаскивания перетаскиваемые элементы файла и каталога связываются с записями файлов и записями каталога соответственно. В DataTransferItem.getAsFileSystemHandle() метод возвращает обещание с FileSystemFileHandle объект, если перетаскиваемый элемент является файлом, и обещание с FileSystemDirectoryHandleобъект, если перетаскиваемый элемент является каталогом. Приведенный ниже листинг демонстрирует это в действии. Обратите внимание, что интерфейс перетаскиванияDataTransferItem.kindбудет как для файлов, так и для каталогов, тогда как API доступа к файловой системеFileSystemHandle.kind будет "file" для файлов и "directory" для справочников.

      elem.addEventListener('dragover', (e) => {
  // Prevent navigation.
  e.preventDefault();
});

elem.addEventListener('drop', async (e) => {
  // Prevent navigation.
  e.preventDefault();
  // Process all of the items.
  for (const item of e.dataTransfer.items) {
    // Careful: `kind` will be 'file' for both file
    // _and_ directory entries.
    if (item.kind === 'file') {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === 'directory') {
        handleDirectoryEntry(entry);
      } else {
        handleFileEntry(entry);
      }
    }
  }
});