Folder Drop

Drop an entire folder onto the upload zone. The uploader receives all files from the folder and displays folder structure information.

Drop a folder here

All files in the folder will be queued

new MultipleUpload(document.getElementById('demo-folder-drop'), {
 uploadUrl: '/api/upload',
 multiple: true,
 dropZoneMode: true,
 onSelect: function(files) {
 var info = document.getElementById('folder-info');
 var totalSize = files.reduce(function(sum, f) { return sum + f.size; }, 0);
 info.textContent = files.length + ' files selected (' +
 MultipleUpload.formatSize(totalSize) + ' total)';
 }
});

Dropping a whole directory

Folder drops are handled wherever the browser supports the directory API — there is no option to enable, and no option to switch it off. Dropping a folder walks it and queues every file inside, at any depth.

The structure survives

Each file keeps its position in the tree, exposed on the task as relativePath, so the folder can be reconstructed on the server rather than flattened. That path comes from the client, so sanitise it before joining it to a directory — a path is the classic route to a traversal.