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!

I believe the only way would be to write an Firefox extension. — epascarello, Dec 06 '13 at 17:31
Thank you for the response. I guess that might be ok since we probably have some control of browser choice, but I was hoping for something more global in usage. — Arthur Frankel, Dec 06 '13 at 17:52

Mark Nadig · Accepted Answer · 2013-12-06T20:10:29.983

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.

edited Dec 06 '13 at 20:10

answered Dec 06 '13 at 18:33

Mark Nadig

4,901
4
37
46

This is exactly what I need since we are using this jquery upload. If I can convince the use of Chrome solely I will use this otherwise I might have to go with the use of uploading a .zip file to get the directory structure and then unzipping and processing from there. – Arthur Frankel Dec 06 '13 at 20:11
It's not supported for mobile. – Maulik Jan 11 '19 at 06:26

Andrew Surzhynskyi · Answer 2 · 2013-12-06T18:23:35.340

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

edited Dec 06 '13 at 18:23

answered Dec 06 '13 at 18:02

Andrew Surzhynskyi

2,726
1
22
32

score 0 · Answer 3 · answered Jul 20 '17 at 19:33

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]));

File Upload and knowing the directory structure

3 Answers3

Linked