Does Html5 Allow Drag-Drop Upload of Folders or a Folder Tree

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

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/

HTML5 drag and drop for directory upload using local htnl5 file

Why: Looks like readEntries raises an error when using the FILE:// protocol. Bug in webkit or Chrome.
Suggestion: unfortunately no.

I am using Chrome (Version 28.0.1500.95)

HTML5 folder drag and drop but single file selection on click

That's what webkitDirectory does, it limits your INPUT to accept only FOLDERS:

https://wicg.github.io/entries-api/#dom-htmlinputelement-webkitdirectory

The webkitdirectory attribute is a boolean attribute that indicates
whether the user is to be allowed to select a directory rather than a
file or files.

To support file selection and drag&drop of either files or folder, you'll need to change your approach, you need a drag&drop zone:

https://jsfiddle.net/atfLe15b/

Example from https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry.

How to use html5 drag-drop functionality with FileSystemAPI?

The
HTML Drag and Drop interfaces
enable web applications to accept
dragged and dropped files
on a web page. During a drag and drop operation, dragged file and directory items are associated
with file entries and directory entries respectively. The DataTransferItem.getAsFileSystemHandle()
method returns a promise with a FileSystemFileHandle object if the dragged item is a file, and a
promise with a FileSystemDirectoryHandle object if the dragged item is a directory. The listing
below shows this in action. Note that the Drag and Drop interface's
DataTransferItem.kind
will be "file" for both files and directories, whereas the File System Access API's
FileSystemHandle.kind will
be "file" for files and "directory" for directories.

elem.addEventListener('dragover', (e) => {
  // Prevent navigation.
  e.preventDefault();
});

elem.addEventListener('drop', async (e) => {
  // Prevent navigation.
  e.preventDefault();
  // Process all of the items.
  for (const item of e.dataTransfer.items) {
    // Careful: `kind` will be 'file' for both file
    // _and_ directory entries.
    if (item.kind === 'file') {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === 'directory') {
        handleDirectoryEntry(entry);
      } else {
        handleFileEntry(entry);
      }
    }
  }
});

HTML5: What should server do when user uploads folder?

Alfresco has recently changed their strategy to the second strategy.

If the uploaded item is a folder or has a null size, it is refused server-side, and the Web UI tells the user.

I guess it is the best thing to do for now.

multiple file upload using html5 drag-and-drop fails as multiple files get same content

I spent sometimes this morning in analyzing the same code from html5uploader. With some lucks, I found the root cause.

Change reader = new FileReader(); to var reader = new FileReader(); should solve the issue.

I bet this is because javascripts behaviour of auto-declaring undeclared variable as global variable. This caused the reader variable being reused by all the uploade(file) calls when more than one file is dropped to the browser.

Cheers!

---

Related Topics