diff --git a/app/assets/javascripts/discourse/components/json-file-uploader.js.es6 b/app/assets/javascripts/discourse/components/json-file-uploader.js.es6
index 250260dc483..b1fd33c380c 100644
--- a/app/assets/javascripts/discourse/components/json-file-uploader.js.es6
+++ b/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;
     });
diff --git a/app/assets/javascripts/discourse/templates/components/json-file-uploader.hbs b/app/assets/javascripts/discourse/templates/components/json-file-uploader.hbs
index fba3461c547..b34f6c4b9f4 100644
--- a/app/assets/javascripts/discourse/templates/components/json-file-uploader.hbs
+++ b/app/assets/javascripts/discourse/templates/components/json-file-uploader.hbs
@@ -1,10 +1,12 @@
-<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"}}
-  {{conditional-loading-spinner condition=loading size="small"}}
+<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"}}
+    {{conditional-loading-spinner condition=loading size="small"}}
+  </div>
+  <div class="jsfu-separator">{{i18n "alternation"}}</div>
+  <div class="jsfu-paste">
+    {{textarea value=value}}
+  </div>
+  <div class="jsfu-shade {{if hover '' 'hidden'}}"><span class="text">{{fa-icon "upload"}}</span></div>
 </div>
-<div class="jsfu-separator">{{i18n "alternation"}}</div>
-<div class="jsfu-paste">
-  {{textarea value=value}}
-</div>
-
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 1115a89accd..43b94b2c9cb 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -139,7 +139,33 @@
       height: 300px;
     }
     .json-uploader {
-      display: table-row;
+      .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;