[IMP] web_drop_target: Upload multiple files

web_drop_target/README.rst

@@ -28,7 +28,6 @@ Known issues / Roadmap
 ======================
 
 * dropping on list or kanban views would be nice too
-* handle multiple files
 * add an upload progress meter for huge files
 * trigger custom events about different stages of the drop operation for other addons to hook in
 
@@ -57,6 +56,7 @@ Contributors
 ------------
 
 * Holger Brunn <hbrunn@therp.nl>
+* Pablo Fuentes <pablo@studio73.es>
 
 Do not contact contributors directly about help with questions or problems concerning this addon, but use the `community mailing list <mailto:community@mail.odoo.com>`_ or the `appropriate specialized mailinglist <https://odoo-community.org/groups>`_ for help, and the bug tracker linked in `Bug Tracker`_ above for technical issues.
 

web_drop_target/__manifest__.py

@@ -3,7 +3,7 @@
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html).
 {
     "name": "Drop target support",
-    "version": "10.0.1.0.1",
+    "version": "10.0.1.1.0",
     "author": "Therp BV,Odoo Community Association (OCA)",
     "website": "https://github.com/OCA/web",
     "license": "AGPL-3",
@@ -11,8 +11,12 @@
     "summary": "Allows to drag files into Odoo",
     "depends": [
         'web',
+        'document'
     ],
     "data": [
         'views/templates.xml',
     ],
+    "qweb": [
+        'static/src/xml/widgets.xml',
+    ]
 }

web_drop_target/static/src/js/web_drop_target.js

@@ -5,17 +5,18 @@
 
 odoo.define('web_drop_target', function(require) {
     var Model = require('web.Model'),
-        FormView = require('web.FormView');
+        FormView = require('web.FormView'),
+        core = require('web.core');
+    var 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 = {
         // add the mime types you want to support here, leave empty for
-        // all types. For more control, override _get_drop_item in your class
+        // all types. For more control, override _get_drop_items in your class
         _drop_allowed_types: [],
 
-        // a class being applied when the user drags something we can handle
-        _drag_over_class: 'o_drag_over',
+        _drop_overlay: null,
 
         start: function() {
             var result = this._super.apply(this, arguments);
@@ -27,45 +28,45 @@ odoo.define('web_drop_target', function(require) {
         },
 
         _on_drop: function(e) {
-            var drop_item = this._get_drop_item(e);
-            if(!drop_item || !(drop_item.getAsFile() instanceof Blob)) {
-                return;
-            }
-            jQuery(e.delegateTarget).removeClass(this._drag_over_class);
-            var reader = new FileReader();
-            reader.onloadend = this.proxy(
-                _.partial(this._handle_file_drop, drop_item.getAsFile())
-            );
-            reader.readAsArrayBuffer(drop_item.getAsFile());
-            e.stopPropagation();
+            var self = this;
+            var drop_items = this._get_drop_items(e);
+            _.each(drop_items, function(drop_item) {
+                var reader = new FileReader();
+                reader.onloadend = self.proxy(
+                    _.partial(self._handle_file_drop, drop_item.getAsFile())
+                );
+                reader.readAsArrayBuffer(drop_item.getAsFile());
+            });
+            this._remove_overlay();
             e.preventDefault();
         },
 
         _on_dragenter: function(e) {
-            if(this._get_drop_item(e)) {
+            if(this._get_drop_items(e).length) {
                 e.preventDefault();
-                jQuery(e.delegateTarget).addClass(this._drag_over_class);
+                this._add_overlay();
                 return false;
             }
         },
 
         _on_dragleave: function(e) {
-            jQuery(e.delegateTarget).removeClass(this._drag_over_class);
+            this._remove_overlay();
+            e.preventDefault();
         },
 
-        _get_drop_item: function(e) {
+        _get_drop_items: function(e) {
             var self = this,
                 dataTransfer = e.originalEvent.dataTransfer,
-                drop_item = null;
+                drop_items = [];
             _.each(dataTransfer.items, function(item) {
                 if(
                     _.contains(self._drop_allowed_types, item.type) ||
                     _.isEmpty(self._drop_allowed_types)
                 ) {
-                    drop_item = item;
+                    drop_items.push(item);
                 }
             });
-            return drop_item;
+            return drop_items;
         },
 
         // eslint-disable-next-line no-unused-vars
@@ -107,7 +108,30 @@ odoo.define('web_drop_target', function(require) {
                     );
                 }
             });
-        }
+        },
+
+        _add_overlay() {
+            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')
+                );
+                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()
+                });
+                o_content.append(this._drop_overlay);
+            }
+        },
+        
+        _remove_overlay() {
+            this._drop_overlay.remove();
+            this._drop_overlay = null;
+        },
     };
 
     // and here we apply the mixin to form views, allowing any files and

web_drop_target/static/src/less/web_drop_target.less

@@ -0,0 +1,19 @@
+.o_content {
+    .o_drag_over{
+        position: fixed;
+        top: 0;
+        left: 0;
+        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;
+        }
+    }
+}

web_drop_target/static/src/xml/widgets.xml

@@ -0,0 +1,17 @@
+<?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_content">
+                <div>
+                    <i class="fa fa-file-o fa-5x" aria-hidden="true"></i>
+                </div>
+                <div>
+                    <h2>Drop your files here</h2>
+                </div>
+            </div>
+        </div>
+    </t>
+</template>
+

web_drop_target/views/templates.xml

@@ -5,7 +5,7 @@
             <xpath expr="." position="inside">
                 <script type="text/javascript" src="/web_drop_target/static/lib/base64js.min.js"></script>
                 <script type="text/javascript" src="/web_drop_target/static/src/js/web_drop_target.js"></script>
-                <link rel="stylesheet" href="/web_drop_target/static/src/css/web_drop_target.css"/>
+                <link rel="stylesheet" href="/web_drop_target/static/src/less/web_drop_target.less"/>
             </xpath>
         </template>
     </data>