Upload folder and all its content in JavaScript

You can actually upload directories in all latest versions of Chrome, Firefox and Microsoft Edge. There are numerous working examples available to look at.

Here is a good, working example that I've previously used in a project

Quarklemotion Html5FileSelector

In addition, Dropzone JS also supports directory uploads as well and it works in Chrome, FF and Edge. I've just transitioned to using this in my own project.

Dropzone JS

These solutions recursively read the directory entries and list all of the files including their relative paths. If you want to rebuild the folder structure when uploading you will have to implement that using the relative paths and the appropriate algorithm.

You can use the webkitdirectory property:

let picker = document.getElementById('picker');
let listing = document.getElementById('listing');

picker.addEventListener('change', e => {
  for (let file of Array.from(e.target.files)) {
    let item = document.createElement('li');
    item.textContent = file.webkitRelativePath;
    listing.appendChild(item);
  };
});

(Forked from <a href='https://codepen.io/simevidas'>Šime Vidas' Pen</a> for posting on Stack Overflow)<br><br>

<div class="picker"><input type="file" id="picker" name="fileList" webkitdirectory multiple></div>

<ul id="listing"></ul>

• For implement the folder upload, you need apply both of JS side and server side:

• At JS side I use these methods (from a teacher that posted at StackoverFlow - https://stackoverflow.com/a/47935286/11544097) to loop and file all file, folder content and subfolders:

  function makedir(entries) {
    const systems = entries.map(entry => traverse(entry, {}));
    return Promise.all(systems);
  
    async function traverse(entry, fs) {
      if (entry.isDirectory) {
        fs[entry.name] = {};
        let dirReader = entry.createReader();
        await new Promise((res, rej) => {
      dirReader.readEntries(async entries => {
        for(let e of entries) {
          await traverse(e, fs[entry.name]);
        }
        res();
      }, rej);
        });
      } else if (entry.isFile) {
        await new Promise((res, rej) => {
      entry.file(file => {
        fs[entry.name] = file;
        res();
      }, rej);
        });
      }
    return fs;
    }
  };
  
  function checkFile(obj){
      return obj instanceof File;
  };
  
  function exactFile(system_trees, relativePath, files){
      for (var i = 0; i < system_trees.length; i++){
          for (var property in system_trees[i]) {
              if (system_trees[i].hasOwnProperty(property)) {
                  if (checkFile(system_trees[i][property])){
                      system_trees[i][property]["relativePath"] = relativePath;
                      files.push(system_trees[i][property]);
                  } else {
                      files.concat(exactFile([system_trees[i][property]], (typeof relativePath !== 'undefined' && relativePath !== '' ? (relativePath + '/') : '') + property, files));
                  }
              }
          }
      }
      return files;
  };
  
  function readDropped(dT,_data) {
    const entries = [...dT.items].map(item => {
        return item.webkitGetAsEntry ? item.webkitGetAsEntry() : null;
      })
      .filter(entry => entry);
    if (entries.length) {
      makedir(entries).then(function(system_trees){
          var files = exactFile(system_trees, "", []);
          c(_data, files);
      }).catch(function(){
          var files = dT.files;
          c(_data, files);
      });
    } else {
          var files = dT.files;
          c(_data, files);
    }
  };
  

• The 'dT' is drop event (e.originalEvent.dataTransfer) and '_data' that is Ajax upload submit form.

• You also need a upload library or write it by yourself to send to file into server by ajax upload. In the code example above, I use formstone upload library (https://formstone.it/components/upload/)

• At server side: You need to process the form data that was sent from JS side, al most case you need to process file by file with relative path info enclosed from the File object.

• One more note, just set 'multiple' attribute at file upload input, NO need a 'webkitdirectory' or 'directory'. They caused the user can not choose the file (only folder allowed)

• The result you will have the uploading system support all folder and files will keeping their structure like Google Drive :).

• There is the tool (https://freetoolonline.com/zip-file.html) that I have wrote that supports folder upload based on the ideal I have explained above.

We succesd to send a full tree of folder with DropZone. Folder as such are not uploaded, but each file will also send original path/local file system path. After is on server side where some work have to be done to properly handle it.

var dropzone = new Dropzone('my-div-class', {
    ...
    sending : function(file, xhr, formData) {
        // Add custom data to send with each file
        // file.fullPath contain relative path to filename from uploaded folder
        formData.append("originalFullPath", file.fullPath);
    }
})

In 2025, the webkitdirectory attribute of input element is not standard yet, but widely accepted.

With this attribute,

<input type="file" name="file" webkitdirectory />

you can select only directories, not files. Once selected, the browser collects all the files in the directory and subdirectories recursively and change the name of the files automatically to reflect the directory structure.

For example, if you chose the rootdir

rootdir/
  - file1.ext
  - subdir1/
    - file2.ext
  - subdir2/

you will get two file objects with

- "rootdir/file1.ext"
- "rootdir/subdir1/file2.ext"

as their names respectively, so that you can easily reconstruct the directory structure from the formData at the server side. Note that empty directories are not selected though.

Unfortunately, only webkit-based browsers support the filesystem API at this point.

If you try to drop a folder in Google Drive using firefox or internet explorer, you will get an error message saying it's not supported.