diff --git a/web_drop_target/README.rst b/web_drop_target/README.rst
index 6a01926fc..098802d39 100644
--- a/web_drop_target/README.rst
+++ b/web_drop_target/README.rst
@@ -89,6 +89,9 @@ Contributors
 * Akim Juillerat <akim.juillerat@camptocamp.com>
 * Enric Tobella <etobella@creublanca.es>
 * Lois Rilo <lois.rilo@forgeflow.com>
+* `Tecnativa <https://www.tecnativa.com>`__:
+
+  * Alexandre D. Díaz
 
 Maintainers
 ~~~~~~~~~~~
diff --git a/web_drop_target/readme/CONTRIBUTORS.rst b/web_drop_target/readme/CONTRIBUTORS.rst
index 2eb872e17..dd61eccfb 100644
--- a/web_drop_target/readme/CONTRIBUTORS.rst
+++ b/web_drop_target/readme/CONTRIBUTORS.rst
@@ -3,3 +3,6 @@
 * Akim Juillerat <akim.juillerat@camptocamp.com>
 * Enric Tobella <etobella@creublanca.es>
 * Lois Rilo <lois.rilo@forgeflow.com>
+* `Tecnativa <https://www.tecnativa.com>`__:
+
+  * Alexandre D. Díaz
diff --git a/web_drop_target/static/description/index.html b/web_drop_target/static/description/index.html
index 1c72b223a..10e98b4bc 100644
--- a/web_drop_target/static/description/index.html
+++ b/web_drop_target/static/description/index.html
@@ -3,7 +3,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
+<meta name="generator" content="Docutils: http://docutils.sourceforge.net/" />
 <title>Drop target support</title>
 <style type="text/css">
 
@@ -436,6 +436,10 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <li>Akim Juillerat &lt;<a class="reference external" href="mailto:akim.juillerat&#64;camptocamp.com">akim.juillerat&#64;camptocamp.com</a>&gt;</li>
 <li>Enric Tobella &lt;<a class="reference external" href="mailto:etobella&#64;creublanca.es">etobella&#64;creublanca.es</a>&gt;</li>
 <li>Lois Rilo &lt;<a class="reference external" href="mailto:lois.rilo&#64;forgeflow.com">lois.rilo&#64;forgeflow.com</a>&gt;</li>
+<li><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:<ul>
+<li>Alexandre D. Díaz</li>
+</ul>
+</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
diff --git a/web_drop_target/static/src/js/web_drop_target.js b/web_drop_target/static/src/js/web_drop_target.js
index cd96bfda8..81ae7cf18 100644
--- a/web_drop_target/static/src/js/web_drop_target.js
+++ b/web_drop_target/static/src/js/web_drop_target.js
@@ -1,84 +1,233 @@
+/* global Uint8Array, base64js */
 // Copyright 2018 Therp BV <https://therp.nl>
+// Copyright 2021 Tecnativa - Alexandre D. Díaz
 // License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html).
-/* global Uint8Array base64js*/
 
 odoo.define("web_drop_target", function(require) {
     "use strict";
 
-    var FormController = require("web.FormController");
-    var core = require("web.core");
-    var qweb = core.qweb;
+    const FormController = require("web.FormController");
+    const core = require("web.core");
+    const qweb = core.qweb;
 
     // This is the main contribution of this addon: A mixin you can use
     // To make some widget a drop target. Read on how to use this yourself
-    var DropTargetMixin = {
+    const DropTargetMixin = {
         // Add the mime types you want to support here, leave empty for
         // All types. For more control, override _get_drop_items in your class
         _drop_allowed_types: [],
+        // Determine the zone where can drop files
+        _drop_zone_selector: ".o_content",
 
-        _drop_overlay: null,
-
+        /**
+         * @override
+         */
         start: function() {
-            var result = this._super.apply(this, arguments);
-            this.$el.on("drop.widget_events", this.proxy("_on_drop"));
-            this.$el.on("dragenter.widget_events", this.proxy("_on_dragenter"));
-            this.$el.on("dragover.widget_events", this.proxy("_on_dragenter"));
-            this.$el.on("dragleave.widget_events", this.proxy("_on_dragleave"));
-            return result;
+            const $body = $("body");
+            this._dropZoneNS = _.uniqueId("o_dz_"); // For event namespace used when multiple chat window is open
+            $body.on(
+                "dragleave." + this._dropZoneNS,
+                this._onBodyFileDragLeave.bind(this)
+            );
+            $body.on(
+                "dragover." + this._dropZoneNS,
+                this._onBodyFileDragover.bind(this)
+            );
+            $body.on("drop." + this._dropZoneNS, this._onBodyFileDrop.bind(this));
+            return this._super.apply(this, arguments).then(result => {
+                _.defer(this._add_overlay.bind(this));
+                return result;
+            });
         },
 
-        _on_drop: function(e) {
-            if (!this._drop_overlay) {
-                return;
-            }
-            var drop_items = this._get_drop_items(e);
-            e.preventDefault();
+        /**
+         * @override
+         */
+        destroy: function() {
+            this._super.apply(this, arguments);
+            const $body = $("body");
+            $body.off("dragleave." + this._dropZoneNS);
+            $body.off("dragover." + this._dropZoneNS);
+            $body.off("drop." + this._dropZoneNS);
             this._remove_overlay();
-            if (!drop_items) {
-                return;
-            }
-            this._handle_drop_items(drop_items, e);
         },
 
-        _on_dragenter: function(e) {
-            e.preventDefault();
-            this._add_overlay();
+        /**
+         * @override
+         */
+        _update: function() {
+            return this._super.apply(this, arguments).then(result => {
+                this._remove_overlay();
+                _.defer(this._add_overlay.bind(this));
+                return result;
+            });
+        },
+
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         * @returns {Number}
+         */
+        _get_record_id: function() {
+            // Implement when including this mixin. Return the record ID.
+            console.log("'_get_record_id': Not Implemented");
             return false;
         },
 
-        _on_dragleave: function(e) {
-            this._remove_overlay();
-            e.preventDefault();
-        },
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         */
+        _add_overlay: function() {
+            if (!this._drop_overlay || this._drop_overlay.length === 0) {
+                this.$drop_zone = this.$(this._drop_zone_selector).last();
+                // Element that represents the zone where you can drop files
+                // TODO: This name is preserved for not breaking the compatibility with other modules,
+                // but should be changed in new versions to follow the standard ($name)
+                this._drop_overlay = $(
+                    qweb.render("web_drop_target.drop_overlay", {
+                        id: this._get_record_id(),
+                    })
+                );
+                this.$drop_zone.append(this._drop_overlay);
 
-        _get_drop_items: function(e) {
-            if (this._get_record_id()) {
-                var self = this,
-                    dataTransfer = e.originalEvent.dataTransfer,
-                    drop_items = [];
-                _.each(dataTransfer.files, function(item) {
-                    if (
-                        _.contains(self._drop_allowed_types, item.type) ||
-                        _.isEmpty(self._drop_allowed_types)
-                    ) {
-                        drop_items.push(item);
-                    }
-                });
-                return drop_items;
+                this._drop_overlay.on("drop", this._on_drop.bind(this));
             }
-            return null;
         },
 
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         */
+        _remove_overlay: function() {
+            if (this._drop_overlay && this._drop_overlay.length) {
+                this._drop_overlay.off("drop");
+                this._drop_overlay.remove();
+                this._drop_overlay = null;
+            }
+        },
+
+        /** ********************
+         * HANDLE EVENTS
+         **********************/
+
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onBodyFileDragLeave: function(ev) {
+            // On every dragenter chain created with parent child element
+            // That's why dragleave is fired every time when a child elemnt is hovered
+            // so here we hide dropzone based on mouse position
+            if (
+                ev.originalEvent.clientX <= 0 ||
+                ev.originalEvent.clientY <= 0 ||
+                ev.originalEvent.clientX >= window.innerWidth ||
+                ev.originalEvent.clientY >= window.innerHeight
+            ) {
+                this._drop_overlay.addClass("d-none");
+            }
+        },
+
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onBodyFileDragover: function(ev) {
+            ev.preventDefault();
+            if (!_.isEmpty(this._get_drop_items(ev))) {
+                const drop_zone_offset = this.$drop_zone.offset();
+                const overlay_css = {
+                    top: drop_zone_offset.top,
+                    left: drop_zone_offset.left,
+                    width: this.$drop_zone.width(),
+                    height: this.$drop_zone.height(),
+                };
+                if (!this._get_record_id()) {
+                    overlay_css.background = "#FF000020";
+                }
+                this._drop_overlay.css(overlay_css);
+                this._drop_overlay.removeClass("d-none");
+            }
+        },
+
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onBodyFileDrop: function(ev) {
+            ev.preventDefault();
+            this._drop_overlay.addClass("d-none");
+        },
+
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _on_drop: function(ev) {
+            if (!this._drop_overlay || this._drop_overlay.length === 0) {
+                return;
+            }
+            ev.preventDefault();
+            const drop_items = this._get_drop_items(ev);
+            if (_.isEmpty(drop_items)) {
+                return;
+            }
+            this._handle_drop_items(drop_items, ev);
+        },
+
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _get_drop_items: function(ev) {
+            let drop_items = [];
+            if (this._get_record_id()) {
+                const dataTransfer = ev.originalEvent.dataTransfer;
+                if (_.isEmpty(this._drop_allowed_types)) {
+                    drop_items = _.clone(dataTransfer.files);
+                } else {
+                    drop_items = _.filter(dataTransfer.files, item =>
+                        _.contains(this._drop_allowed_types, item.type)
+                    );
+                }
+            }
+            return drop_items;
+        },
+
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         * @param {Array} drop_items
+         * @param {MouseEvent} ev
+         */
         // eslint-disable-next-line no-unused-vars
-        _handle_drop_items: function(drop_items, e) {
+        _handle_drop_items: function(drop_items, ev) {
             // Do something here, for example call the helper function below
             // e is the on_load_end handler for the FileReader above,
             // so e.target.result contains an ArrayBuffer of the data
         },
 
-        _create_attachment: function(file, reader, e, res_model, res_id, extra_data) {
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         * @param {Object} file
+         * @param {FileReader} reader
+         * @param {String} res_model
+         * @param {Number} res_id
+         * @param {Object} extra_data
+         */
+        _create_attachment: function(file, reader, res_model, res_id, extra_data) {
             // Helper to upload an attachment and update the sidebar
-            var self = this;
             return this._rpc({
                 model: "ir.attachment",
                 method: "create",
@@ -92,100 +241,69 @@ odoo.define("web_drop_target", function(require) {
                             res_model: res_model,
                             res_id: res_id,
                         },
-                        extra_data || {}
+                        extra_data
                     ),
                 ],
-            }).then(function() {
+            }).then(() => {
                 // Find the chatter among the children, there should be only
                 // one
-                var res = _.filter(self.getChildren(), "chatter");
-                if (res.length) {
-                    res[0].chatter._reloadAttachmentBox();
-                    res[0].chatter.trigger_up("reload");
-                    res[0].chatter.$(".o_chatter_button_attachment").click();
+                const res = _.chain(this.getChildren())
+                    .filter("chatter")
+                    .first()
+                    .value();
+                if (res) {
+                    // This launch a 'reload' of the view
+                    res.chatter._reloadAttachmentBox();
+                    res.chatter.$(".o_chatter_button_attachment").click();
                 }
             });
         },
 
-        _file_reader_error_handler: function(e) {
-            console.error(e);
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         * @param {ErrorEvent} ev
+         */
+        _file_reader_error_handler: function(ev) {
+            console.error(ev);
         },
 
-        _handle_file_drop_attach: function(item, e, res_model, res_id, extra_data) {
-            var self = this;
-            var file = item;
-            if (!file || !(file instanceof Blob)) {
+        /**
+         * TODO: Change the name to follow the standard in new versions
+         *
+         * @private
+         * @param {Object} item
+         */
+        _handle_file_drop_attach: function(item) {
+            if (!item || !(item instanceof Blob)) {
                 return;
             }
-            var reader = new FileReader();
-            reader.onloadend = self.proxy(
-                _.partial(
-                    self._create_attachment,
-                    file,
-                    reader,
-                    e,
-                    res_model,
-                    res_id,
-                    extra_data
-                )
+            const res_model = this.renderer.state.model;
+            const res_id = this.renderer.state.res_id;
+            const reader = new FileReader();
+            reader.onloadend = this._create_attachment.bind(
+                this,
+                item,
+                reader,
+                res_model,
+                res_id,
+                undefined
             );
-            reader.onerror = self.proxy("_file_reader_error_handler");
-            reader.readAsArrayBuffer(file);
-        },
-
-        _get_record_id: function() {
-            // Implement when including this mixin. Return the record ID.
-            console.log("'_get_record_id': Not Implemented");
-            return false;
-        },
-
-        _add_overlay: function() {
-            var self = this;
-            if (!this._drop_overlay) {
-                var o_content = jQuery(".o_content"),
-                    view_manager = jQuery(".o_view_manager_content");
-                this._drop_overlay = jQuery(
-                    qweb.render("web_drop_target.drop_overlay", {
-                        id: self._get_record_id(),
-                    })
-                );
-                var o_content_position = o_content.position();
-                this._drop_overlay.css({
-                    top: o_content_position.top,
-                    left: o_content_position.left,
-                    width: view_manager.width(),
-                    height: view_manager.height(),
-                });
-                if (!this._get_record_id()) {
-                    this._drop_overlay.css("background", "#FF000020");
-                }
-                o_content.append(this._drop_overlay);
-            }
-        },
-
-        _remove_overlay: function() {
-            if (this._drop_overlay) {
-                this._drop_overlay.remove();
-                this._drop_overlay = null;
-            }
+            reader.onerror = this._file_reader_error_handler.bind(this);
+            reader.readAsArrayBuffer(item);
         },
     };
 
     // And here we apply the mixin to form views, allowing any files and
     // adding them as attachment
     FormController.include(
-        _.extend(DropTargetMixin, {
-            // eslint-disable-next-line no-unused-vars
-            _handle_drop_items: function(drop_items, e) {
-                var self = this;
-                _.each(drop_items, function(item, e) {
-                    return self._handle_file_drop_attach(
-                        item,
-                        e,
-                        self.renderer.state.model,
-                        self.renderer.state.res_id
-                    );
-                });
+        _.extend({}, DropTargetMixin, {
+            // Using multi-selector to ensure that is displayed in forms without "sheet"
+            // NOTE: Only the inner element would be selected
+            _drop_zone_selector: ".o_form_sheet_bg,.o_form_view",
+            _handle_drop_items: function(drop_items) {
+                _.each(drop_items, this._handle_file_drop_attach, this);
             },
             _get_record_id: function() {
                 return this.renderer.state.res_id;
diff --git a/web_drop_target/static/src/scss/web_drop_target.scss b/web_drop_target/static/src/scss/web_drop_target.scss
index e0b5140e7..564f1f3e1 100644
--- a/web_drop_target/static/src/scss/web_drop_target.scss
+++ b/web_drop_target/static/src/scss/web_drop_target.scss
@@ -1,19 +1,17 @@
-.o_content {
-    .o_drag_over {
-        position: fixed;
-        top: 0;
-        left: 0;
+.o_drag_over {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+    border: 2px dashed $o-brand-primary;
+    z-index: 2;
+    .o_drag_over_content {
+        position: relative;
+        top: 50%;
+        transform: translate(0%, -50%);
         width: 100%;
-        height: 100%;
-        background-color: rgba(255, 255, 255, 0.6);
-        border: 1px dashed #4c4c4c;
-        pointer-events: none;
-        .o_drag_over_content {
-            position: relative;
-            top: 50%;
-            transform: translate(0%, -50%);
-            width: 100%;
-            text-align: center;
-        }
+        text-align: center;
     }
 }
diff --git a/web_drop_target/static/src/xml/widgets.xml b/web_drop_target/static/src/xml/widgets.xml
index df2b85889..3abb76851 100644
--- a/web_drop_target/static/src/xml/widgets.xml
+++ b/web_drop_target/static/src/xml/widgets.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <template>
     <t t-name="web_drop_target.drop_overlay">
-        <div class="o_drag_over">
+        <div class="o_drag_over d-none">
             <div class="o_drag_over_content">
                 <div>
                     <i class="fa fa-file-o fa-5x" aria-hidden="true" />
