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