Handle directory/files upload with one input javascript

Question

I want to allow users dragging and uploading directory and files.

i know i could create

<input type="file" multiple />
<!-- for files/multiple files upload-->

and

<input type="file" directory mozDirectory webkitDirectory />
<!-- for directory uploads -->

i tried detecting while user is dragging the item if it is a directory or file and setting directory attribute depending on that, but turns out that javascript doesn't allow you to check that.

also i have seen on lot of websites that users are able to drag both files and directories together and even multiple directories.

how can i achieve that?

score 4 · Accepted Answer · edited May 23 '17 at 12:17

Dragging and droppping of folders is available in Chrome >= 21

Here's what you need (Not tried, but it can give you the idea):

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 information can be found here

Answer taken from here

thanks for the tree function, it'll be usefull but how can i know if user dragged folder or item in the input? — , May 05 '15 at 10:50
@JohannesFlügel Glad to hear that.. :) Happy Coding.. Cheers. — Saiyan Prince, Dec 10 '16 at 04:34

Handle directory/files upload with one input javascript

1 Answers1

Linked