X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=frontend%2Fjs%2Fapp.js;h=df5043a17277424e8fd193c68386a5abf07e8e22;hb=8370d9f06066dd808214b838551a29d24731bbd6;hp=8970a0f8b6c3d379fa6fba545bbcc51cfdac931d;hpb=09d1f4f5e8ae9b4bd65c6241a9c6cdfaeed200fa;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git

diff --git a/frontend/js/app.js b/frontend/js/app.js
index 8970a0f..df5043a 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -136,7 +136,7 @@ function uploadFiles(files) {
     app.uploadStatus.percentDone = 0;
 
     asyncForEach(files, function (file, callback) {
-        var path = encode(sanitize(app.path + '/' + file.name));
+        var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name)));
 
         var formData = new FormData();
         formData.append('file', file);
@@ -164,12 +164,59 @@ function uploadFiles(files) {
 }
 
 function dragOver(event) {
+    event.stopPropagation();
     event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
 }
 
 function drop(event) {
+    event.stopPropagation();
     event.preventDefault();
-    uploadFiles(event.dataTransfer.files || []);
+
+    if (!event.dataTransfer.items[0]) return;
+
+    // figure if a folder was dropped on a modern browser, in this case the first would have to be a directory
+    var folderItem;
+    try {
+        folderItem = event.dataTransfer.items[0].webkitGetAsEntry();
+        if (folderItem.isFile) return uploadFiles(event.dataTransfer.files);
+    } catch (e) {
+        return uploadFiles(event.dataTransfer.files);
+    }
+
+    // if we got here we have a folder drop and a modern browser
+    // now traverse the folder tree and create a file list
+    app.uploadStatus.busy = true;
+    app.uploadStatus.uploadListCount = 0;
+
+    var fileList = [];
+    function traverseFileTree(item, path, callback) {
+        if (item.isFile) {
+            // Get file
+            item.file(function (file) {
+                fileList.push(file);
+                ++app.uploadStatus.uploadListCount;
+                callback();
+            });
+        } else if (item.isDirectory) {
+            // Get folder contents
+            var dirReader = item.createReader();
+            dirReader.readEntries(function (entries) {
+                asyncForEach(entries, function (entry, callback) {
+                    traverseFileTree(entry, path + item.name + '/', callback);
+                }, callback);
+            });
+        }
+    }
+
+    traverseFileTree(folderItem, '', function (error) {
+        app.uploadStatus.busy = false;
+        app.uploadStatus.uploadListCount = 0;
+
+        if (error) return console.error(error);
+
+        uploadFiles(fileList);
+    });
 }
 
 var app = new Vue({
@@ -181,7 +228,8 @@ var app = new Vue({
             busy: false,
             count: 0,
             done: 0,
-            percentDone: 50
+            percentDone: 50,
+            uploadListCount: 0
         },
         path: '/',
         pathParts: [],
@@ -250,10 +298,8 @@ var app = new Vue({
             var that = this;
 
             $(this.$refs.upload).on('change', function () {
-
                 // detach event handler
                 $(that.$refs.upload).off('change');
-
                 uploadFiles(that.$refs.upload.files || []);
             });
 
@@ -261,6 +307,19 @@ var app = new Vue({
             this.$refs.upload.value = '';
             this.$refs.upload.click();
         },
+        onUploadFolder: function () {
+            var that = this;
+
+            $(this.$refs.uploadFolder).on('change', function () {
+                // detach event handler
+                $(that.$refs.uploadFolder).off('change');
+                uploadFiles(that.$refs.uploadFolder.files || []);
+            });
+
+            // reset the form first to make the change handler retrigger even on the same file selected
+            this.$refs.uploadFolder.value = '';
+            this.$refs.uploadFolder.click();
+        },
         onDelete: function (entry) {
             var that = this;