Upload files with drag&drop in the drive

www/common/common-file.js

@@ -238,7 +238,13 @@ define([
             reader.readAsArrayBuffer(file);
         };
 
-        var createAreaHandlers = File.createDropArea = function ($area, $hoverArea, todo) {
+        var onFileDrop = File.onFileDrop = function (file, e) {
+            Array.prototype.slice.call(file).forEach(function (d) {
+                handleFile(d, e);
+            });
+        };
+
+        var createAreaHandlers = File.createDropArea = function ($area, $hoverArea) {
             var counter = 0;
             if (!$hoverArea) { $hoverArea = $area; }
             $hoverArea
@@ -267,15 +273,14 @@ define([
                 var dropped = e.originalEvent.dataTransfer.files;
                 counter = 0;
                 $hoverArea.removeClass('hovering');
-
+                onFileDrop(dropped, e);
-                Array.prototype.slice.call(dropped).forEach(function (d) {
-                    todo(d, e);
-                });
             });
         };
 
         var createUploader = function ($area, $hover, $body) {
-            createAreaHandlers($area, null, handleFile);
+            if (!config.noHandlers) {
+                createAreaHandlers($area, null);
+            }
             createTableContainer($body);
         };
 

www/common/cryptpad-common.js

@@ -586,19 +586,6 @@ define([
                 return pad;
             });
 
-            if (!contains && href) {
-                var data = makePad(href, name);
-                getStore().pushData(data, function (e, id) {
-                    if (e) {
-                        if (e === 'E_OVER_LIMIT') {
-                            common.alert(Messages.pinLimitNotPinned, null, true);
-                            return;
-                        }
-                        else { return void cb(e); }
-                    }
-                    getStore().addPad(id, common.initialPath);
-                });
-            }
             if (updateWeaker.length > 0) {
                 updateWeaker.forEach(function (obj) {
                     // If we have a stronger url, and if all the occurences of the weaker were
@@ -606,6 +593,20 @@ define([
                     getStore().restoreHref(obj.n);
                 });
             }
+            if (!contains && href) {
+                var data = makePad(href, name);
+                getStore().pushData(data, function (e, id) {
+                    if (e) {
+                        if (e === 'E_OVER_LIMIT') {
+                            common.alert(Messages.pinLimitNotPinned, null, true);
+                        }
+                        return void cb(e);
+                    }
+                    getStore().addPad(id, common.initialPath);
+                    cb(err, recent);
+                });
+                return;
+            }
             cb(err, recent);
         });
     };

www/common/toolbar2.js

@@ -96,6 +96,10 @@ define([
         } else {
             styleToolbar($container);
         }
+        $container.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
         return $toolbar;
     };
 

www/drive/main.js

@@ -205,6 +205,17 @@ define([
         var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu");
         var $trashContextMenu = $iframe.find("#trashContextMenu");
 
+        $tree.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        $driveToolbar.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+
+
         // TOOLBAR
 
         /* add a "change username" button */
@@ -1012,13 +1023,30 @@ define([
             ev.dataTransfer.setData("text", stringify(data));
         };
 
+        var onFileDrop = APP.onFileDrop = function (file, e) {
+            APP.FM.onFileDrop(file, e);
+        };
+        var findDropPath = function (target) {
+            var $target = $(target);
+            var $el = findDataHolder($target);
+            var newPath = $el.data('path');
+            if ((!newPath || filesOp.isFile(filesOp.find(newPath)))
+                    && $target.parents('#content')) {
+                newPath = currentPath;
+            }
+            return newPath;
+        };
         var onDrop = function (ev) {
             ev.preventDefault();
             $iframe.find('.droppable').removeClass('droppable');
             var data = ev.dataTransfer.getData("text");
+
+            // Don't the the normal drop handler for file upload
+            var fileDrop = ev.dataTransfer.files;
+            if (fileDrop) { return void onFileDrop(fileDrop, ev); }
+
             var oldPaths = JSON.parse(data).path;
             if (!oldPaths) { return; }
-
             // Dropped elements can be moved from the same file manager or imported from another one.
             // A moved element should be removed from its previous location
             var movedPaths = [];
@@ -1032,8 +1060,7 @@ define([
                 }
             });
 
-            var $el = findDataHolder($(ev.target));
+            var newPath = findDropPath(ev.target);
-            var newPath = $el.data('path');
             if (!newPath) { return; }
             if (movedPaths && movedPaths.length) {
                 moveElements(movedPaths, newPath, null, refresh);
@@ -1069,6 +1096,8 @@ define([
                 e.preventDefault();
             });
             $element.on('drop', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
                 onDrop(e.originalEvent);
             });
             $element.on('dragenter', function (e) {
@@ -1087,6 +1116,7 @@ define([
                 }
             });
         };
+        addDragAndDropHandlers($content, null, true, true);
 
         // In list mode, display metadata from the filesData object
         // _WORKGROUP_ : Do not display title, atime and ctime columns since we don't have files data
@@ -2559,6 +2589,29 @@ define([
             if (typeof(cb) === "function") { cb(); }
         };
 
+        var fmConfig = {
+            noHandlers: true,
+            onUploaded: function (ev, data) {
+                try {
+                    // Get the folder path
+                    var newPath = findDropPath(ev.target);
+                    if (!newPath) { return void refresh(); }
+                    var href = data.url;
+                    // Get the current file location in ROOT
+                    var id = filesOp.getIdFromHref(href);
+                    var paths = filesOp.findFile(id);
+                    if (paths.length !== 1) { return; }
+                    // Try to move and refresh
+                    moveElements([paths[0]], newPath, true);
+                    refresh();
+                } catch (e) {
+                    console.error(e);
+                    refresh();
+                }
+            }
+        };
+        APP.FM = Cryptpad.createFileManager(fmConfig);
+
         createReadme(proxy, function () {
             refresh();
             APP.userList.onChange();

www/file/file.css

@@ -77,42 +77,3 @@ body {
   z-index: 10000;
   display: block;
 }
-#uploadStatus {
-  display: none;
-  width: 80vw;
-  margin-top: 50px;
-  margin-left: 10vw;
-  border: 1px solid black;
-  border-collapse: collapse;
-}
-#uploadStatus tr:nth-child(1) {
-  background-color: #ccc;
-  border: 1px solid #999;
-}
-#uploadStatus tr:nth-child(1) td {
-  text-align: center;
-}
-#uploadStatus td {
-  border-left: 1px solid #BBB;
-  border-right: 1px solid #BBB;
-  padding: 0 10px;
-}
-#uploadStatus .upProgress {
-  width: 200px;
-  position: relative;
-  text-align: center;
-}
-#uploadStatus .progressContainer {
-  position: absolute;
-  width: 0px;
-  left: 5px;
-  top: 1px;
-  bottom: 1px;
-  background-color: rgba(0, 0, 255, 0.3);
-}
-#uploadStatus .upCancel {
-  text-align: center;
-}
-#uploadStatus .fa.cancel {
-  color: #ff0073;
-}

www/file/file.less

@@ -87,38 +87,3 @@ html, body {
     display: block;
 }
 
-#uploadStatus {
-    display: none;
-    width: 80vw;
-    margin-top: 50px;
-    margin-left: 10vw;
-    border: 1px solid black;
-    border-collapse: collapse;
-    tr:nth-child(1) {
-        background-color: #ccc;
-        border: 1px solid #999;
-        td { text-align: center; }
-    }
-    td {
-        border-left: 1px solid #BBB;
-        border-right: 1px solid #BBB;
-        padding: 0 10px;
-    }
-    .upProgress {
-        width: 200px;
-        position: relative;
-        text-align: center;
-    }
-    .progressContainer {
-        position: absolute;
-        width: 0px;
-        left: 5px;
-        top: 1px; bottom: 1px;
-        background-color: rgba(0,0,255,0.3);
-    }
-    .upCancel { text-align: center; }
-    .fa.cancel {
-        color: rgb(255, 0, 115);
-    }
-}
-

www/slide/main.js

@@ -511,11 +511,6 @@ define([
                 if (readOnly) { return; }
                 UserList.getLastName(toolbar.$userNameButton, isNew);
 
-
-                /*editor.on('dragover', function (e) {
-                    //console.log(editor.coordsChar());
-                    console.log(e);
-                });*/
                 var fmConfig = {
                     dropArea: $iframe.find('.CodeMirror'),
                     body: $iframe.find('body'),