jQuery-File-Upload plugin - can't drop folder

Question

I'm trying to implement jQuery-File-Upload - I have it working when I drag & drop files from explorer into my browser. But I also want to be able to drag and drop a folder.

When I drop files onto the browser, the files are in the data.files param in the fileuploaddrop(e, data) event handler. But when I drop a folder, the files array is empty.

var dropZone = $('#fileUploadDiv').fileupload({
    dropZone : $('.dropZone'),
    drop : function(e, data) {
      $.each(data.files, function(index, file) {
        console.log('Dropped file: ' + file.name);
      });
    }
}).

Is this not supported by the plugin, or is there a mystery setting I'm missing somewhere ?

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

5

The uploader uses HTML5 capabilities, which don't allow dropping folders. Read more here: Does HTML5 allow drag-drop upload of folders or a folder tree?

edited May 23 '17 at 12:22

Community

1
1

answered May 01 '12 at 15:16

jeremyharris

7,884
22
31

score 2 · Answer 2 · edited Apr 06 '15 at 13:26

2

Drag/Drop and input Directory upload now available with chrome 21

you can get directory upload using webkitdirectory

<input type='file' webkitdirectory>

Here is a complete code for uploading folders.

https://protonet.info/en/blog/html5-experiment-drag-drop-of-folders/

edited Apr 06 '15 at 13:26

Karthik Kamalakannan

770
1
11
31

answered Jul 24 '12 at 13:21

kongaraju

9,344
11
55
78

This seems to limit to only directories. Is there any way to select both files and directories? – bradvido Sep 21 '15 at 13:36

jQuery-File-Upload plugin - can't drop folder

2 Answers2