javascripthtmlfile-uploaddrag-and-drop

Does HTML5 allow drag-drop upload of folders or a folder tree?


I haven't seen any examples that do this. Is this not allowed in the API spec?

I am searching for an easy drag-drop solution for uploading an entire folder tree of photos.


Solution

  • It's now possible, thanks to Chrome >= 21.

    function traverseFileTree(item, path) {
      path = path || "";
      if (item.isFile) {
        // Get file
        item.file(function(file) {
          console.log("File:", path + file.name);
        });
      } else if (item.isDirectory) {
        // Get folder contents
        var dirReader = item.createReader();
        dirReader.readEntries(function(entries) {
          for (var i=0; i<entries.length; i++) {
            traverseFileTree(entries[i], path + item.name + "/");
          }
        });
      }
    }
    
    dropArea.addEventListener("drop", function(event) {
      event.preventDefault();
    
      var items = event.dataTransfer.items;
      for (var i=0; i<items.length; i++) {
        // webkitGetAsEntry is where the magic happens
        var item = items[i].webkitGetAsEntry();
        if (item) {
          traverseFileTree(item);
        }
      }
    }, false);
    

    More info: https://protonet.info/blog/html5-experiment-drag-drop-of-folders/

    As a note (from the comments) this code is not complete if more than 100 entries are returned, some iteration is required, see https://stackoverflow.com/a/53058574/885922