Как загрузить папки, чтобы реагировать со спецсимволами в названии

Насколько я знаю, React не любит webkitdirectory, а также webkitdirectory может скоро быть устаревшим в пользу дропзон. Не совсем уверен в этом, но это то, что я читал в некоторых обсуждениях по этому поводу. Кроме того, я не думаю, что он полностью совместим со всеми браузерами. См. совместимость браузеров.

Для загрузки файлов с помощью каталогов и подкаталогов зачастую более эффективно использовать стандартный «API файлов HTML» в сочетании с DirectoryReader. Еще одна вещь, которую следует учитывать, — это рекурсивный обход структуры каталогов.

Вот пример того, как вы можете это реализовать:

const handleParameterSearchUpload = async (event) => {
  const traverseFiles = async (files) => {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      if (file.isDirectory) {
        const directoryReader = file.createReader();
        const entries = await new Promise((resolve) => {
          directoryReader.readEntries(resolve);
        });
        await traverseFiles(entries);
      } else {
        // Process the file
        console.info("Uploading file:", file.name);
        // Upload logic
    }
  };

  const files = event.target.files;
  console.info("Uploaded files:", files);

  await traverseFiles(files);

  // Clear `event.target.value` instead, since we can access the input element
  // directly from the event object. No need for ref.
  event.target.value = "";
};

На всякий случай я также хочу упомянуть: вам нужно использовать decodeURIComponent, чтобы получить исходное имя папки после ее закодирования.

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

Непосредственная загрузка папок с Javascript в React может быть сложной задачей, особенно со специальными символами в именах. Вот почему и некоторые альтернативные подходы:

Проблемы с загрузкой папок:

• Ограничения браузера: стандартный элемент загрузки HTML-файла (<input type = "file">) не поддерживает прямой выбор папок. Хотя атрибут webkitdirectory существует (для Chrome и Safari), он не поддерживается широко и может быть признан устаревшим.

Альтернативные подходы:

1. Использование библиотек:

   Такие библиотеки, как https://react-dropzone.js.org/, могут обрабатывать выбор папок и предоставлять удобный интерфейс перетаскивания. Эти библиотеки часто обрабатывают специальные символы, соответствующим образом кодируя их перед отправкой на сервер.

2. Файловый API с рекурсией:

   Вы можете использовать API файлов HTML5 с объектом DirectoryReader для перемещения по выбранной структуре каталогов. Вот разбивка:

   • Зафиксируйте событие выбора файла в своем компоненте React.
   • Используйте event.target.files для доступа к выбранным файлам.
   • Прокрутите файлы:
     • Если это каталог, используйте createReader для файлового объекта, чтобы создать DirectoryReader.
     • Используйте readEntries на ридере, чтобы получить массив дочерних записей (файлов и подкаталогов).
     • Вызовите рекурсивную функцию для обработки каждой записи (обработка файлов и повторение для каталогов).
   • Внутри цикла поиска файлов проверьте, является ли это каталогом, используя file.isDirectory.
   • Что касается файлов, вы можете обрабатывать их загрузку с помощью специальных символов, кодируя имена файлов с помощью encodeURIComponent перед отправкой их на сервер. Не забудьте декодировать их обратно на стороне сервера.

Важная заметка:

Загрузка больших структур папок с большим количеством файлов может не подходить для HTTP-запросов из-за ограничений. Рассмотрите библиотеки или серверные решения для обработки больших загрузок.

const handleFolderUpload = async (event) => {
  const files = event.target.files;

  const traverseFiles = async (entries) => {
    for (let i = 0; i < entries.length; i++) {
      const entry = entries[i];
      if (entry.isDirectory) {
        const directoryReader = entry.createReader();
        const subEntries = await new Promise((resolve) => directoryReader.readEntries(resolve));
        await traverseFiles(subEntries);
      } else {
        // Process the file
        const encodedFilename = encodeURIComponent(entry.name);
        console.info("Uploading file:", encodedFilename);
        // Implement your upload logic here, sending encodedFilename to the server
      }
    }
  };

  await traverseFiles(files);
  // Clear the file input after processing
  event.target.value = "";
};