[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

addons/web/static/src/js/core/ajax.js

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

addons/web_editor/controllers/main.py

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

addons/web_editor/static/src/js/wysiwyg/widgets/media.js

@@ -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('');
 

addons/web_editor/static/src/xml/wysiwyg.xml

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