jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?
This should be possible at webkit
browsers using drag-and-drop .dataTransfer
object at drop
event; .webkitGetAsEntry()
; webkitRequestFileSystem
getDirectory()
to create directory having same name as uploaded folder, .createReader()
on DirectoryEntry
, readEntries()
to iterate entries in directory, call .copyTo()
for each FileEntry
with destination being created directory having uploaded directory name.
The folder should now be accesible using either webkitRequestFileSystem()
, then calling .getDirectory()
with directory name as first parameter and empty options object {}
as second parameter.
Alternatively, can access folder from actual user filesystem at chrome or chromium profile folder using file manager gui or command line interface.
Or, create a local script to copy folders in File System
to another directory, and rename folders to original names of folders that were uploaded. The folder and file paths are not adjusted, only the folder names.
is able to preserve the structure of uploaded subfolders (= uploading 1 folder with 3 subfolder, each containing several files)?
At file manager the folder would not be named the same as uploaded directory, though should retain folder and file structure. The folder should be located at last folder in File System
at chrome profile folder, before Origins
folder. See also How to Write in file (user directory) using JavaScript?
function errorHandler(e) {
console.log(e)
}
function handleFiles(e) {
console.log("file", file)
}
function handleDrop(event) {
var dt = event.dataTransfer;
for (var i = 0; i < event.dataTransfer.items.length; i++) {
var entry = dt.items[i].webkitGetAsEntry();
if (entry.isFile) {
console.log("isFile", entry.isFile, entry);
entry.file(handleFiles);
} else if (entry.isDirectory) {
console.log("isDirectory", entry.isDirectory, entry);
window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024
, function(fs) {
// create directory with uploaded directory name
fs.root.getDirectory(entry.name, {
create: true
}, function(dirEntry) {
// read folders, files in uploaded directory
var reader = entry.createReader();
reader.readEntries(function(entries) {
entries.forEach(function(file) {
// copy files to new directory
file.copyTo(dirEntry);
console.log("file:", file, "\ncopied to directory:", dirEntry)
})
})
}, errorHandler)
}, errorHandler)
}
}
}
plnkr http://plnkr.co/edit/oUIhwUc3CDxI64SrvxIh?p=preview