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

Answer 1

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