Merge pull request #7145 from guerler/fix_drop

Use regular js-event handling instead of jquery for uploader

client/galaxy/scripts/mvc/ui/ui-select-content.js

@@ -169,20 +169,20 @@ var View = Backbone.View.extend({
         };
 
         // add drag-drop event handlers
-        this.$el
-            .on("dragenter", function(e) {
-                this.lastenter = e.target;
-                self.$el.addClass("ui-dragover");
-            })
-            .on("dragover", e => {
-                e.preventDefault();
-            })
-            .on("dragleave", function(e) {
-                this.lastenter === e.target && self.$el.removeClass("ui-dragover");
-            })
-            .on("drop", e => {
-                self._handleDrop(e);
-            });
+        let element = this.$el.get(0);
+        element.addEventListener("dragenter", e => {
+            this.lastenter = e.target;
+            self.$el.addClass("ui-dragover");
+        });
+        element.addEventListener("dragover", e => {
+            e.preventDefault();
+        });
+        element.addEventListener("dragleave", e => {
+            this.lastenter === e.target && self.$el.removeClass("ui-dragover");
+        });
+        element.addEventListener("drop", e => {
+            self._handleDrop(e);
+        });
 
         // track current history elements
         this.history = {};
@@ -412,7 +412,7 @@ var View = Backbone.View.extend({
             var current = this.model.get("current");
             var config = this.config[current];
             var field = this.fields[current];
-            var drop_data = JSON.parse(ev.originalEvent.dataTransfer.getData("text"))[0];
+            var drop_data = JSON.parse(ev.dataTransfer.getData("text"))[0];
             var new_id = drop_data.id;
             var new_src = drop_data.history_content_type == "dataset_collection" ? "hdca" : "hda";
             var new_value = { id: new_id, src: new_src };

client/galaxy/scripts/mvc/upload/composite/composite-row.js

@@ -38,10 +38,10 @@ export default Backbone.View.extend({
         // build upload functions
         this.uploadinput = this.$el.uploadinput({
             ondragover: function() {
-                self.model.get("enabled") && self.$el.addClass("warning");
+                self.model.get("enabled") && self.$el.addClass("alert-success");
             },
             ondragleave: function() {
-                self.$el.removeClass("warning");
+                self.$el.removeClass("alert-success");
             },
             onchange: function(files) {
                 if (self.model.get("status") != "running" && files && files.length > 0) {

client/galaxy/scripts/utils/uploadbox.js

@@ -256,18 +256,19 @@ import { getAppRoot } from "onload/loadConfig";
         );
 
         // drag/drop events
-        el.on("drop", e => {
+        let element = el.get(0);
+        element.addEventListener("drop", e => {
             opts.ondragleave(e);
             if (e.dataTransfer) {
                 opts.onchange(e.dataTransfer.files);
                 e.preventDefault();
             }
         });
-        el.on("dragover", e => {
+        element.addEventListener("dragover", e => {
             e.preventDefault();
             opts.ondragover(e);
         });
-        el.on("dragleave", e => {
+        element.addEventListener("dragleave", e => {
             e.stopPropagation();
             opts.ondragleave(e);
         });

client/galaxy/style/scss/upload.scss

@@ -279,6 +279,9 @@
     td {
         padding: 0.5rem;
     }
+    .alert-success {
+        background: $brand-success !important;
+    }
 }
 
 .upload-settings {