File Upload and knowing the directory structure

file-upload, javascript, javascript-security, jquery, jquery-file-upload

Solution

See jquery file upload's support for this related to @Dead133s mention of webkitdirectory https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

"It is possible to select a complete folder structure, though this is currently only supported by Google Chrome.To enable this feature, the following vendor-specific directory attributes have to be added to the file input field:"

<input type="file" name="files[]" multiple directory webkitdirectory mozdirectory>

Another low-tech solution would be to have users zip up the files and upload those, preserving any folder.

Problem

We are using jquery fileupload to drag and drop files (and folders) from a local computer to a browser. This works great but we can't capture the directory structure of the files within the folder. I understand why (from a security perspective and javascript) this doesn't work, but does anyone have any thoughts on best ways to achieve the same thing. Again, I want my customer (internal app) to drag and drop a folder into my application. My application can see the list of filenames and they get uploaded, but I would like to maintain the directory structure of those files for use elsewhere. i.e., it's important for me to know that it came from directory x/1/a rather than y/2/b. Thanks in advance!

Original source