Techsystech
/
web_techsystech
forked from Techsystech/web
3
0
Fork 0
Code Pull Requests Activity

[IMP] web_drop_target: Upload multiple files

13.0
Pablo Fuentes 2018-06-27 13:09:37 +02:00 committed by Adrià Gil Sorribes
parent 731a5e717d
commit eedbf1b22e
7 changed files with 91 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web_drop_target/README.rst
View File

@ -55,7 +55,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
* Install document module to display attachments in the sidebar
@ -82,7 +81,11 @@ Contributors
~~~~~~~~~~~~
* Holger Brunn <hbrunn@therp.nl>
<<<<<<< HEAD
* Akim Juillerat <akim.juillerat@camptocamp.com>
=======
* Pablo Fuentes <pablo@studio73.es>
>>>>>>> 25dd8787... [IMP] web_drop_target: Upload multiple files
Maintainers
~~~~~~~~~~~

4
web_drop_target/__manifest__.py
View File

@ -10,8 +10,12 @@
"summary": "Allows to drag files into Odoo",
"depends": [
'web',
'document'
],
"data": [
'views/templates.xml',
],
"qweb": [
'static/src/xml/widgets.xml',
]
}

0
web_drop_target/static/src/css/web_drop_target.css
View File

68
web_drop_target/static/src/js/web_drop_target.js
View File

@ -4,16 +4,17 @@
odoo.define('web_drop_target', function(require) {
var FormController = require('web.FormController');
var 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);
@ -25,45 +26,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
@ -104,7 +105,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

19
web_drop_target/static/src/less/web_drop_target.less 100644
View File

@ -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;
}
}
}

17
web_drop_target/static/src/xml/widgets.xml 100644
View File

@ -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>

2
web_drop_target/views/templates.xml
View File

@ -4,7 +4,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>
</odoo>