Skip to content
Permalink
Browse files

[IMP] web,web_editor: make image upload work without iframe

This makes the code easier to understand and to maintain.

It was previously coded like this because FormData was not supported in older
browsers, but we don't support them anymore now so we can use it.

Part of task 1930726
  • Loading branch information...
seb-odoo committed Feb 19, 2019
1 parent 867df17 commit 11a9f7725bbd2c63d93f602c2dbfab606196dfe0
@@ -307,7 +307,7 @@ function get_file(options) {
return true;
}

function post (controller_url, data) {
function post (controller_url, data, form) {

var progressHandler = function (deferred) {
return function (state) {
@@ -324,7 +324,7 @@ function post (controller_url, data) {
};

var Def = $.Deferred();
var postData = new FormData();
var postData = new FormData(form);

$.each(data, function(i,val) {
postData.append(i, val);
@@ -235,10 +235,12 @@ def attach(self, upload=None, url=None, disable_optimization=None, filters=None,
logger.exception("Failed to upload image to attachment")
message = str(e)

return """<script type='text/javascript'>
window.attachments = %s;
window.error = %s;
</script>""" % (json.dumps(uploads), json.dumps(message))
return request.make_response(json.dumps({
'attachments': uploads,
'error': message
}), headers=[
('Content-Type', 'application/json'),
])

#------------------------------------------------------
# remove attachment (images or link)
@@ -1,6 +1,7 @@
odoo.define('wysiwyg.widgets.media', function (require) {
'use strict';

var ajax = require('web.ajax');
var core = require('web.core');
var Dialog = require('web.Dialog');
var fonts = require('wysiwyg.fonts');
@@ -462,21 +463,13 @@ var ImageWidget = MediaWidget.extend({
* @private
*/
_uploadFile: function () {
return this._mutex.exec(this._uploadImageIframe.bind(this));
return this._mutex.exec(this._uploadImageFile.bind(this));
},
_uploadImageIframe: function () {
_uploadImageFile: function () {
var self = this;
var def = $.Deferred();
/**
* @todo file upload cannot be handled with _rpc smoothly. This uses the
* form posting in iframe trick to handle the upload.
*/
var $iframe = this.$('iframe');
$iframe.on('load', function () {
var iWindow = $iframe[0].contentWindow;

var attachments = iWindow.attachments || [];
var error = iWindow.error;
var def = ajax.post('/web_editor/attachment/add', {}, this.$el[0]).then(function (res) {
var attachments = res.attachments;
var error = res.error;

self.$('.well > span').remove();
self.$('.well > div').show();
@@ -488,16 +481,14 @@ var ImageWidget = MediaWidget.extend({
_processFile(null, error || !attachments.length);
}
self.images = attachments;
for (var i = 0 ; i < attachments.length ; i++) {
for (var i = 0; i < attachments.length; i++) {
_processFile(attachments[i], error);
}

if (self.options.onUpload) {
self.options.onUpload(attachments);
}

def.resolve();

function _processFile(attachment, error) {
var $button = self.$('.o_upload_image_button');
if (!error) {
@@ -514,7 +505,6 @@ var ImageWidget = MediaWidget.extend({
}
}
});
this.$el.submit();

this.$('.o_file_input').val('');

@@ -99,11 +99,7 @@

<!-- Image choosing part of the Media Dialog -->
<t t-name="wysiwyg.widgets.image">
<t t-set="iframeName" t-value="_.uniqueId('fileframe-')"/>
<form method="POST"
action="/web_editor/attachment/add"
enctype="multipart/form-data"
t-att-target="iframeName">
<form>
<input type="hidden" name="csrf_token" t-att-value="csrf_token"/>
<input type="hidden" name="filters" t-att-value="widget.firstFilters.join('_')"/>
<input t-if="widget.options.res_id" type="hidden" name="res_id" t-att-value="widget.options.res_id"/>
@@ -120,7 +116,6 @@
<span><i>All attachments have been loaded</i></span>
</div>
</div>
<iframe class="o_file_upload_iframe d-none" t-att-name="iframeName"/>
</form>
</t>

0 comments on commit 11a9f77

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.