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

by

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 + "https://stackoverflow.com/");
      }
    });
  }
}

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/

More Related Contents:

  1. drag drop files into standard html file input
  2. How to set a value to a file input in HTML?
  3. How to check file MIME type with javascript before upload?
  4. How do I remove a file from the FileList
  5. Remember and Repopulate File Input [duplicate]
  6. How to resolve the C:\fakepath?
  7. Client Checking file size using HTML5?
  8. Using HTML5 file uploads with AJAX and jQuery
  9. jQuery : simulating a click on a doesn’t work in Firefox? [duplicate]
  10. Reading uploaded text file contents in html
  11. Get Base64 encode file-data from Input Form
  12. How to select multiple files with ?
  13. HTML5 dragleave fired when hovering a child element
  14. get the data of uploaded file in javascript
  15. Integrating Dropzone.js into existing HTML form with other fields
  16. How FileReader.readAsText in HTML5 File API works?
  17. HTML5 Drag and Drop anywhere on the screen
  18. HTML5 Drag & Drop Change icon/cursor while dragging
  19. Simulate drop file event
  20. Drag-and-drop file uploading without AJAX, synchronously in the foreground?
  21. Prevent browser from loading a drag-and-dropped file
  22. How to use jQuery’s drop event to upload files dragged from the desktop?
  23. HTML5 drop event doesn’t work unless dragover is handled
  24. Detecting HTML5 Drag And Drop support in javascript
  25. How to determine presence of HTML5 drag’n’drop file upload API (like the one from FF3.6)
  26. html5 drag and drop FOR MOBILE [duplicate]
  27. copying the value of a form’s file input field to another form’s input field
  28. javascript: upload image file and draw it into a canvas
  29. how to get full path from fileupload using Javascript
  30. trigger file upload dialog using javascript/jquery

Leave a Comment