TL;DR you can't.
If you're wondering why this question still hasn't got an accepted answer, you can read this meta question created by OP, and my answer.
File drag/drop in HTML5
I made some research in different pieces of documentation for this topic and tested it by myself on various browsers, so I decided to summarize all I know about drag and drop of files here.
Dragging
When you drag a file you can use some listeners, such as:
dragenterdragoverdragenddragleave
Given that these are drag events, the files property of event.dataTransfer will either have length == 0 or be empty (null).
You can't read files details in a drag event and you can't check if they are folders. This is not a bug, it's a security feature.
Imagine you could read files on a drag event: you would be able to read everything even if the user doesn't want to upload files to your site. It would make no sense, seriously. Imagine you are dragging a file from your desktop to another folder and you accidentally drag it through a web page: now the web page reads your file and stores your personal information on its server... that would be a huge security flaw.
However, you will still be able to detect whether the user is dragging files (and by files I mean folders too, because folders are files) or not by iterating over the array event.dataTransfer.types. You can create a function that checks if the drag event contains files, and then call it in the event handler.
Example:
function containsFiles(event) {
if (event.dataTransfer.types) {
for (var i=0; i<event.dataTransfer.types.length; i++) {
if (event.dataTransfer.types[i] == "Files") {
return true;
}
}
}
return false;
}
function handleDragEnter(e) {
e.preventDefault();
if (containsFiles(e)) {
// The drag event contains files
// Do something
} else {
// The drag event doesn't contain files
// Do something else
}
}
Dropping
When you drop a file into the drop <div> (or whatever element you're using as dropzone), you will use a listener for the event drop to read some file properties such as name, size, type and last modification date.
You can use euristics to try detecting if a file is a folder or not.
Heuristic #1
Use FileReader or webkitGetAsEntry() as suggested in this other answer. A FileReader instance will emit an error event if trying to read a folder (for example with reader.readAsBinaryString(e.dataTransfer.files[i]).
Problem: using FileReader effectively means reading the file. For large files, this can cause problems!
Heuristic #2
Check if the file has type === "" and its size is a multiple of 4096 (size % 4096 === 0).
Problem: this method doesn't give you absolute certainty that a file is a folder: it might be a file without extension and with a size of 0 or exactly N x 4096B. Furthermore, as noted in the comments below for example, not all platforms have folders with a .size multiple of 4096. For example, one user reports a size of 928 for a folder on macOS.
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) { // iterate in the files dropped
if (!f.type === "" && f.size % 4096 === 0) {
// The file might be a folder
// Do something
} else {
// The file is not a folder
// Do something else
}
}
}
Working examples
Here are some working examples to see what I said above in action and test it by yourself. Before running them, make sure that your browser supports drag and drop features. Have fun:
