File upload and directory structure knowledge

Question

We use jquery fileupload to drag files (and folders) from the local computer to the browser. This works fine, but we cannot grab the directory structure of the files in the folder. I understand why (in terms of security and javascript) this does not work, but does anyone have any thoughts on better ways to achieve the same.

Again, I want my client (internal application) to drag the folder into my application. My application can see a list of file names and they are loading, but I would like to maintain a directory structure of these files for use elsewhere. those. It’s important for me to know that this came from the x / 1 / a directory, not y / 2 / b.

Thanks in advance!

Answer 1

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

"You can select the full folder structure, although it is currently only supported by Google Chrome. To enable this feature, the following directory attributes of a specific provider must be added to the file input field:"

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

Another low-tech solution would be for users to upload files and upload them, saving any folder.

Answer 2

File APIs: directories and the system are currently a working project of W3C and already work in webkit, work in the latest Chrome and Safari browsers.

There is a good example of downloading files, you can display the directory and see its structure: http://sapphion.com/2012/06/keep-directory-structure-when-uploading/

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

Answer 3

You can achieve this by either using a custom file system API implementation similar to this , or even using DropzoneJS , and then using an algorithm similar to the one below to build a hash map of directories and files that belong to each directory. I have included the sample code below, which 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]));