Question

I know very well that you are not allowed to upload a whole folder via drag and drop. The problem is, how can I tell if someone tries to do it? If you drag a folder into the browser, it behaves exactly as if you dragged a file with some extension webkit doesn’t know about, like ‘.sh’. How can you tell the difference?

I have tested this in Chrome and Safari and Firefox on Mac OS X and Windows. Depending on the browser and OS, I get slightly different results. Sometimes it succeeds in uploading a zero-byte file. Sometimes it uploads a picture of a folder. Sometimes it fails to upload anything.

event.dataTransfer.types and event.dataTransfer.items both lie and say the type is “File” or “file” respectively.

Firefox gives this list of types:

{"0":"application/x-moz-file","1":"text/x-moz-url","2":"text/plain","3":"Files"}

Answer 1

I found a way to do it. The information can be found in dataTransfer.items via getAsEntry, though it’s a little different in different browsers. Also, this doesn’t have a pointer back to the file you wanted, though you can figure it out based on the file name assuming you’re not uploading two files with the same name at the same time. There’s not really much to work with here, so this is the best I could do.

just_the_files = (dataTransfer) ->
    real_files_set = {}
    for item in dataTransfer.items
        entry = item.getAsEntry?() or item.webkitGetAsEntry?() or item
        if entry.isFile
            real_files_set[entry.name] = true
     (file for file in dataTransfer.files when file.name of real_files_set)