File Upload and knowing the directory structure

Question

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!

Answer 1

File API: Directories and System is currently a W3C Working Draft and already works in webkit, works in latest Chrome and Safari.

There is a nice file upload example, you can dropdown a directory and see it's structure: http://sapphion.com/2012/06/keep-directory-structure-when-uploading/

Awesome html5rocks tutorial: http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-dir

Answer 2

You can achieve this using either a custom implementation of the filesystem API similar to this or even just using DropzoneJS and then using an algorithm similar to the one below to build a hash map of the directories and files that belong in each directory. I've included some sample code below that should push you in the right direction.

        uploadFilesDepthFirst(folderId, folderInfo) {
            Object.keys(folderInfo.children).forEach(childFolderName => uploadFilesDepthFirst(folder.id, folderInfo.children[childFolderName]));
            folderInfo.files.map(file => uploadFile(folderId, file.file));
        }

        let fileList = files.map((file) => { return {path: file.fullPath, filename: file.name , file: file} });

        const hierarchy = {}; // {folder_name} = { name: <name of folder>, children: {...just like hierarchy...}, files: [] }
        // build tree
        fileList.map(file => {
            const paths = file.path.split('/').slice(0, -1);
            let parentFolder = null;
            // builds the hierarchy of folders.
            paths.map(path => {
                if (!parentFolder) {
                    if (!hierarchy[path]) {
                        hierarchy[path] = {
                            name: path,
                            children: {},
                            files: [],
                        };
                    }
                    parentFolder = hierarchy[path]
                } else {
                    if (!parentFolder.children[path]) {
                        parentFolder.children[path] = {
                            name: path,
                            children: {},
                            files: [],
                        };
                    }
                    parentFolder = parentFolder.children[path];
                }
            });
            parentFolder.files.push(file);
        });

        Object.keys(hierarchy).map(folderName => uploadFilesDepthFirst(parentId, hierarchy[folderName]));

Answer 3

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.