diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index 12cd7d39..81e51c30 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -813,6 +813,25 @@ input:invalid {
 }
 
 
+/* *********** */
+/*   Various   */
+/* *********** */
+
+.umap-dragover:before {
+    content:  ' ';
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs">%3Cpath d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>%3C/svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #323e56;
+    z-index: 401;
+    display: block;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    opacity: 0.5;
+}
+
+
 /* *********** */
 /*    Mobile   */
 /* *********** */
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 87dbac6c..f24bdf69 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -317,26 +317,27 @@ L.U.DropControl = L.Class.extend({
 
   initialize: function (map) {
     this.map = map
-    this.dropbox = map._container
+    this.dropzone = map._container
   },
 
   enable: function () {
-    L.DomEvent.on(this.dropbox, "dragenter", this.dragenter, this)
-    L.DomEvent.on(this.dropbox, "dragover", this.dragover, this)
-    L.DomEvent.on(this.dropbox, "drop", this.drop, this)
-    L.DomEvent.on(this.dropbox, "dragleave", this.dragleave, this)
+    L.DomEvent.on(this.dropzone, "dragenter", this.dragenter, this)
+    L.DomEvent.on(this.dropzone, "dragover", this.dragover, this)
+    L.DomEvent.on(this.dropzone, "drop", this.drop, this)
+    L.DomEvent.on(this.dropzone, "dragleave", this.dragleave, this)
   },
 
   disable: function () {
-    L.DomEvent.off(this.dropbox, "dragenter", this.dragenter, this)
-    L.DomEvent.off(this.dropbox, "dragover", this.dragover, this)
-    L.DomEvent.off(this.dropbox, "drop", this.drop, this)
-    L.DomEvent.off(this.dropbox, "dragleave", this.dragleave, this)
+    L.DomEvent.off(this.dropzone, "dragenter", this.dragenter, this)
+    L.DomEvent.off(this.dropzone, "dragover", this.dragover, this)
+    L.DomEvent.off(this.dropzone, "drop", this.drop, this)
+    L.DomEvent.off(this.dropzone, "dragleave", this.dragleave, this)
   },
 
   dragenter: function (e) {
     L.DomEvent.stop(e)
     this.map.scrollWheelZoom.disable()
+    this.dropzone.classList.add('umap-dragover')
   },
 
   dragover: function (e) {
@@ -344,8 +345,8 @@ L.U.DropControl = L.Class.extend({
   },
 
   drop: function (e) {
+    this.dropzone.classList.remove('umap-dragover')
     L.DomEvent.stop(e)
-    this.map.scrollWheelZoom.enable()
     for (let i = 0, file; (file = e.dataTransfer.files[i]); i++) {
       this.map.processFileToImport(file)
     }
@@ -354,6 +355,7 @@ L.U.DropControl = L.Class.extend({
 
   dragleave: function () {
     this.map.scrollWheelZoom.enable()
+    this.dropzone.classList.remove('umap-dragover')
   }
 
 })