filemanager: support file and folder drops

filemanager/src/views/Home.vue

@@ -59,6 +59,7 @@
             :new-folder-handler="onNewFolder"
             :upload-file-handler="onUploadFile"
             :upload-folder-handler="onUploadFolder"
+            :drop-handler="onDrop"
             :items="items"
             :clipboard="clipboard"
             :owners-model="ownersModel"
@@ -72,7 +73,6 @@
     <template #footer>
       <FileUploader
         ref="fileUploader"
-        :cwd="cwd"
         :upload-handler="uploadHandler"
         @finished="onUploadFinished"
       />
@@ -221,10 +221,10 @@ export default {
       this.newFolderDialog.visible = false;
     },
     onUploadFile() {
-      this.$refs.fileUploader.onUploadFile();
+      this.$refs.fileUploader.onUploadFile(this.cwd);
     },
     onUploadFolder() {
-      this.$refs.fileUploader.onUploadFolder();
+      this.$refs.fileUploader.onUploadFolder(this.cwd);
     },
     onUploadFinished() {
       this.loadCwd();
@@ -241,6 +241,39 @@ export default {
     onGoUp() {
       this.cwd = sanitize(this.cwd.split('/').slice(0, -1).join('/'));
     },
+    async onDrop(targetFolder, dataTransfer) {
+      const fullTargetFolder = sanitize(this.cwd + '/' + targetFolder);
+
+      // figure if a folder was dropped on a modern browser, in this case the first would have to be a directory
+      let folderItem;
+      try {
+          folderItem = dataTransfer.items[0].webkitGetAsEntry();
+          if (folderItem.isFile) return this.$refs.fileUploader.addFiles(dataTransfer.files, fullTargetFolder, false);
+      } catch (e) {
+          return this.$refs.fileUploader.addFiles(dataTransfer.files, fullTargetFolder, false);
+      }
+
+      // if we got here we have a folder drop and a modern browser
+      // now traverse the folder tree and create a file list
+      var that = this;
+      function traverseFileTree(item, path) {
+        if (item.isFile) {
+          item.file(function (file) {
+            that.$refs.fileUploader.addFiles([file], sanitize(`${that.cwd}/${targetFolder}`), false);
+          });
+        } else if (item.isDirectory) {
+          // Get folder contents
+          var dirReader = item.createReader();
+          dirReader.readEntries(function (entries) {
+            for (let i in entries) {
+              traverseFileTree(entries[i], item.name);
+            }
+          });
+        }
+      }
+
+      traverseFileTree(folderItem, '');
+    },
     onItemActivated(item) {
       if (!item) return;