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

Question

I installed the download of the drag and drop script file in JS (AJAX POST), and I'm having difficulty filtering folders in Safari - version 5.0.3 (6533.19.4).

Whenever I delete several files / folders in the browser, Chrome filters out the folders and Firefox returns 0 for .size , so it’s trivial to protect against these cases. Safari, however, will return a 68-byte file (folder size).

Is there any way to check if this File (item in FileList ) is a folder? Nothing seems to be found in the File / Blob API that checks this condition (it makes no sense to try .type as 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 load FormData :

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

Answer 1

Why not just check out the oldschool suffix file? It should work in most cases when "file.suf" is a file and "file" is a folder ...

Answer 2

You can determine if it was a file or folder on the server using the source data: Get the source data

I noticed that folders only have a form border at the beginning and not a single one at the end. So it looks like the browser starts making a message and then just stops before completing the request. (I only tested this with safari, but I think it is the same with other browsers.)

You can save the failed download in the session and then use AJAX to check if such a request generated a failure. You have an additional AJAX request, but at least you can detect it. This is the best option I've found so far.

Answer 3

We can read the file with FileReader . The code may be like this:

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

For folders, this will give an error:

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