Add callback to clean up after misbehaved drag and drop events

The jQuery Plugin triggers the "dragover" callback when the browser
triggers the "dragover" event and the types in their DataTransfer
include a "Files" item. It also triggers the "drop" callback when the
browser triggers the "drop" event and the list of files in its
DataTransfer is not empty.

Unfortunately some browsers may trigger "dragover" events with a
DataTransfer that includes a "Files" item and then trigger a "drop"
event with an empty list of files. When that happens the actions
performed in the "dragXXX" callbacks could be left hanging if they were
expected to be finished in the "drop" callback (for example, if the drop
zone was highlighted during the drag to be then restored when the file
was finally dropped). This commit adds the "dropnofiles" callback to be
able to handle those situations.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 12 insertions, 0 deletions

diff --git a/apps/files/js/jquery.fileupload.js b/apps/files/js/jquery.fileupload.js
index 622161ede97..ea8529f3226 100644
--- a/apps/files/js/jquery.fileupload.js
+++ b/apps/files/js/jquery.fileupload.js
@@ -258,6 +258,9 @@
             // Callback for drop events of the dropZone(s):
             // drop: function (e, data) {}, // .bind('fileuploaddrop', func);
 
+            // Callback for drop events of the dropZone(s) when there are no files:
+            // dropnofiles: function (e) {}, // .bind('fileuploaddropnofiles', func);
+
             // Callback for dragover events of the dropZone(s):
             // dragover: function (e) {}, // .bind('fileuploaddragover', func);
 
@@ -1275,6 +1278,15 @@
                         that._onAdd(e, data);
                     }
                 });
+            } else {
+                // "dropnofiles" is triggered to allow proper cleanup of the
+                // drag and drop operation, as some browsers trigger "drop"
+                // events that have no files even if the "DataTransfer.types" of
+                // the "dragover" event included a "Files" item.
+                this._trigger(
+                    'dropnofiles',
+                    $.Event('drop', {delegatedEvent: e})
+                );
             }
         },