HTML5 Drag and Drop - detect folders in Safari (FileList, File)

Question

I've set up a drag and drop file upload script in JS (AJAX POST) and I'm having difficulties filtering folders in Safari - Version 5.0.3 (6533.19.4).

Whenever I drop multiple files/folders into the browser, Chrome will filter out the folders, and Firefox will return 0 for .size so it's trivial to protect against those cases. Safari, however, will return a 68 byte file (the size of the folder).

Is there any way to test whether this File (item in FileList) is a folder? Can't seem to find anything in the File/Blob API that tests for this condition (no point in trying .type, since it returns nothing for unknown files as well as folders...)

A bit more info:

Basically what happens is that the AJAX request has an empty body. I'm uploading with FormData:

var file = ...; // the dropped file
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
...
xhr.send(formData);

I posted a bug report for this: https://bugs.webkit.org/show_bug.cgi?id=63898 — meleyal, Jul 04 '11 at 12:05
The latest versions of Chrome seem to be presenting the same issue as Safari. Did you have any luck tracking down a standard method of filtering these out? — Chris Hynes, Aug 29 '11 at 17:06
It looks like there is an `isDirectory` property based on this documentation https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/isDirectory but that might not be supported in Safari. — 1.21 gigawatts, Jan 28 '18 at 00:02

score 1 · Answer 1 · answered Jul 15 '17 at 05:53

We can read a file, with FileReader. Code can be like this:

Array.prototype.forEach.call(e.dataTransfer.files, function (file) {
  var reader = new FileReader();
  reader.onload = function (event) {
    // it's a file
    addFile(file);
  };
  reader.onerror = function (event) {
    alert("Uploading folders not supported in Safari");
  }
  reader.readAsDataURL(file);
});

For folders it will give error:

Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 4.)

score 0 · Answer 2 · edited May 23 '17 at 12:10

You could detect whether it was a file or folder on the server using raw post data: Get raw post data

I noticed that folders have only form boundary at the beginning and none at the end. So basically it looks like the browser starts doing the post and then just stops before completing the request. (I only tested this with safari but i guess it's the same with other browsers.)

You could save the failed upload in the session and then use AJAX to test whether the failed upload generated such a request. You do have an aditional AJAX request, but at least you can detect it. It's the best option I have found so far.

score -3 · Accepted Answer · answered Feb 15 '11 at 14:00

-3

Why not just check for oldschool file-suffix? Should work on most cases where "file.suf" is a file and "file" is a folder...

answered Feb 15 '11 at 14:00

zoku

26
1

1

Doesn't quite do the trick (there are files without extensions) but lacking a better response, I'm marking this one as right. – biasedbit Apr 21 '11 at 17:51
Looks like there is a better way. Google docs is able to distinguish files and folders during Ajax drop. It processes files with no extension correctly, as a file. Really interested how these was achieved. – IT Hit WebDAV Dec 04 '13 at 14:48

HTML5 Drag and Drop - detect folders in Safari (FileList, File)

3 Answers3