this just in: drag events are very broken

app/assets/javascripts/discourse/components/json-file-uploader.js.es6

@@ -3,6 +3,7 @@ export default Em.Component.extend({
   fileInput: null,
   loading: false,
   expectedRootObjectName: null,
+  hover: 0,
 
   classNames: ['json-uploader'],
 
@@ -17,15 +18,29 @@ export default Em.Component.extend({
       self.fileSelected(this.files);
     });
 
-    const $fileSelect = $this.find('.fileSelect');
+    const $dragContainer = $this.find('.jsfu-shade-container');
 
-    $fileSelect.on('dragover dragenter', function(e) {
+    $this.on('dragover', function(e) {
       if (e.preventDefault) e.preventDefault();
+      //self.set('hover', true);
       return false;
     });
-    $fileSelect.on('drop', function(e) {
+    $this.on('dragenter', function(e) {
+      if (e.preventDefault) e.preventDefault();
+      console.log('dragenter');
+      self.set('hover', self.get('hover') + 1);
+      return false;
+    });
+    $this.on('dragleave', function(e) {
+      if (e.preventDefault) e.preventDefault();
+      console.log('dragleave');
+      self.set('hover', self.get('hover') - 1);
+      return false;
+    });
+    $this.on('drop', function(e) {
       if (e.preventDefault) e.preventDefault();
 
+      self.set('hover', 0);
       self.fileSelected(e.dataTransfer.files);
       return false;
     });

app/assets/javascripts/discourse/templates/components/json-file-uploader.hbs

@@ -1,3 +1,4 @@
+<div class="jsfu-shade-container">
   <div class="jsfu-file">
     <input id="js-file-input" type="file" style="display:none;" accept={{accept}}>
     {{d-button class="fileSelect" action="selectFile" class="" icon="upload" label="upload_selector.select_file"}}
@@ -7,4 +8,5 @@
   <div class="jsfu-paste">
     {{textarea value=value}}
   </div>
-
+  <div class="jsfu-shade {{if hover '' 'hidden'}}"><span class="text">{{fa-icon "upload"}}</span></div>
+</div>

app/assets/stylesheets/common/base/modal.scss

@@ -139,7 +139,33 @@
       height: 300px;
     }
     .json-uploader {
+      .jsfu-shade-container {
         display: table-row;
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+      .jsfu-shade {
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        .text {
+          color: rgb(255,255,255);
+          position: absolute;
+          top: 40%;
+          font-size: 36px;
+          text-align: center;
+          line-height: 38px;
+          margin-left: auto;
+          margin-right: auto;
+          left: 0;
+          right: 0;
+        }
+      }
       .jsfu-file {
         display: table-cell;
         vertical-align: middle;