#Uploading deeply nested folders

9 messages · Page 1 of 1 (latest)

jade relic
#

I am using JavaScript with react and I am trying to upload files and folders.

  const [files, setFiles] = useState([]);

  const handleDropFile = (event) => {
    event.preventDefault();
    const items = event.dataTransfer.items;
    const fileList = [];
    for (let i = 0; i < items.length; i++) {
      const entry = items[i].webkitGetAsEntry();
      if (entry.isFile) {
        fileList.push(new Promise((resolve) => entry.file(resolve)));
      } else if (entry.isDirectory) {
        fileList.push(traverseDirectory(entry, entry.name + "/"));
      }
    }
    Promise.all(fileList).then((files) => {
      console.log(files, files.flat())
      setFiles(files.flat());
    });
  };
  const traverseDirectory = (directory, currentPath) => {
    return new Promise((resolve) => {
      const reader = directory.createReader();
      const fileList = [];
      const readEntries = () => {
        reader.readEntries((entries) => {
          entries.forEach((entry) => {
            if (entry.isFile) {
              fileList.push(
                new Promise((resolve) =>
                  entry.file((file) => {
                    const modifiedFile = new File(
                      [file],
                      currentPath + file.name,
                      { type: file.type }
                    );
                    resolve(modifiedFile);
                  })
                )
              );
            } else if (entry.isDirectory) {
              fileList.push(
                traverseDirectory(entry, currentPath + "/" + entry.name)
              );
            }
          });
          if (entries.length > 0) {
            readEntries();
          } else {
            resolve(Promise.all(fileList));
          }
        });
      };

<div onDrop={handleDropFile} >

For some reason I am getting nested arrays of files eventough I am using fold(). I think the issue comes from promises.

#

This is what console.log(files, files.flat()) prints:

[File, Array(2), Array(2), File]
[File, File, File, Array(1), File, File]

#

and if it is not clear what I want to do is: when given a folder upload all files inside of it recursively

delicate steeple
#

Array.flat() accepts an argument for depth (number). If you do not provide that, in only flattens 1 level

jade relic
#

I thought it was infinite?

#

how can I do something like that

delicate steeple
#

files.flat(5) for example

jade relic
#

Thank you

delicate steeple