jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?

Question

I am trying this plugin (https://github.com/blueimp/jQuery-File-Upload) and interesting in folder upload.

I wonder if the plugin is able to preserve the structure of uploaded subfolders (= uploading 1 folder with 3 subfolder, each containing several files)?

Bechtold

Answer 1

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

Hemorrhoid

@TomK It is also possible to utilize <input type="file"> element to upload single or multiple files, folders using upload dialog or drag-and-drop by including multiple attribute and toggling webkitdirectory attribute; using createWriter() to write file to created directory. – Hemorrhoid