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