From 1ce9ec0718fa6f8ce32dec753ccb5711c18da737 Mon Sep 17 00:00:00 2001
From: Fabien Meghazi <fme@openerp.com>
Date: Wed, 13 Jun 2012 12:05:16 +0200
Subject: [PATCH] [IMP] Improved hidden file uploads usage

bzr revid: fme@openerp.com-20120613100516-1opf05g81icwuwbr
---
 addons/web/controllers/main.py        | 19 ++-------
 addons/web/static/src/css/base.css    |  4 +-
 addons/web/static/src/css/base.sass   | 14 +++----
 addons/web/static/src/js/view_form.js | 16 ++++++--
 addons/web/static/src/xml/base.xml    | 56 +++++++++++++--------------
 5 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/addons/web/controllers/main.py b/addons/web/controllers/main.py
index 1ccba0c9867..8203efc969e 100644
--- a/addons/web/controllers/main.py
+++ b/addons/web/controllers/main.py
@@ -1420,16 +1420,8 @@ class Binary(openerpweb.Controller):
         # TODO: might be useful to have a configuration flag for max-length file uploads
         try:
             out = """<script language="javascript" type="text/javascript">
-                        var win = window.top.window,
-                            callback = win[%s];
-                        if (typeof(callback) === 'function') {
-                            callback.apply(this, %s);
-                        } else {
-                            win.jQuery('#oe_notification', win.document).notify('create', {
-                                title: "Ajax File Upload",
-                                text: "Could not find callback"
-                            });
-                        }
+                        var win = window.top.window;
+                        win.jQuery(win).trigger(%s, %s);
                     </script>"""
             data = ufile.read()
             args = [len(data), ufile.filename,
@@ -1444,11 +1436,8 @@ class Binary(openerpweb.Controller):
         Model = req.session.model('ir.attachment')
         try:
             out = """<script language="javascript" type="text/javascript">
-                        var win = window.top.window,
-                            callback = win[%s];
-                        if (typeof(callback) === 'function') {
-                            callback.call(this, %s);
-                        }
+                        var win = window.top.window;
+                        win.jQuery(win).trigger(%s, %s);
                     </script>"""
             attachment_id = Model.create({
                 'name': ufile.filename,
diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 0ccaf77c809..eaba96e771a 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1875,14 +1875,14 @@
   vertical-align: -3px;
   padding: 0 2px;
 }
-.openerp .oe_form .oe-binary-file-set {
+.openerp .oe_hidden_input_file {
   overflow: hidden;
   position: relative;
   display: inline-block;
   width: 45px;
   height: 30px;
 }
-.openerp .oe_form input.oe-binary-file {
+.openerp .oe_hidden_input_file input.oe-binary-file {
   z-index: 0;
   line-height: 0;
   font-size: 12px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index e6e48089733..00fbbb80c58 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1508,13 +1508,12 @@ $colour4: #8a89ba
     /* http://www.quirksmode.org/dom/inputfile.html
      * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
      */
-    .oe_form
-        .oe-binary-file-set
-            overflow: hidden
-            position: relative
-            display: inline-block
-            width: 45px
-            height: 30px
+    .oe_hidden_input_file
+        overflow: hidden
+        position: relative
+        display: inline-block
+        width: 45px
+        height: 30px
         input.oe-binary-file
             z-index: 0
             line-height: 0
@@ -1528,6 +1527,7 @@ $colour4: #8a89ba
             -ms-filter: "alpha(opacity=0)"
             margin: 0
             padding: 0
+    .oe_form
         .oe_form_field_image
             > img
                 min-width: 100px
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 7a51cbce3c5..46c66537690 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -3973,9 +3973,18 @@ instance.web.form.FieldReference = instance.web.form.AbstractField.extend(_.exte
 
 instance.web.form.FieldBinary = instance.web.form.AbstractField.extend(_.extend({}, instance.web.form.ReinitializeFieldMixin, {
     init: function(field_manager, node) {
+        var self = this;
         this._super(field_manager, node);
-        this.iframe = this.element_id + '_iframe';
         this.binary_value = false;
+        this.fileupload_id = _.uniqueId('oe_fileupload');
+        $(window).on(this.fileupload_id, function() {
+            var args = [].slice.call(arguments).slice(1);
+            self.on_file_uploaded.apply(self, args);
+        });
+    },
+    stop: function() {
+        $(window).off(this.fileupload_id);
+        this._super.apply(this, arguments);
     },
     initialize_content: function() {
         this.$element.find('input.oe-binary-file').change(this.on_file_change);
@@ -3995,8 +4004,8 @@ instance.web.form.FieldBinary = instance.web.form.AbstractField.extend(_.extend(
         // TODO: on modern browsers, we could directly read the file locally on client ready to be used on image cropper
         // http://www.html5rocks.com/tutorials/file/dndfiles/
         // http://deepliquid.com/projects/Jcrop/demos.php?demo=handler
-        window[this.iframe] = this.on_file_uploaded;
-        if ($(e.target).val() != '') {
+
+        if ($(e.target).val() !== '') {
             this.$element.find('form.oe-binary-form input[name=session_id]').val(this.session.session_id);
             this.$element.find('form.oe-binary-form').submit();
             this.$element.find('.oe-binary-progress').show();
@@ -4004,7 +4013,6 @@ instance.web.form.FieldBinary = instance.web.form.AbstractField.extend(_.extend(
         }
     },
     on_file_uploaded: function(size, name, content_type, file_base64) {
-        delete(window[this.iframe]);
         if (size === false) {
             this.do_warn("File Upload", "There was a problem while uploading your file");
             // TODO: use openerp web crashmanager
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 5e3df49b89b..27660e7bc66 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -528,7 +528,7 @@
 </t>
 <t t-name="Sidebar.attachments">
     <div class="oe-sidebar-attachments-toolbar">
-        <div class="oe-binary-file-set" style="float: right">
+        <div class="oe_hidden_input_file" style="float: right">
             <form class="oe-binary-form" t-attf-target="#{element_id}_iframe"
                 method="post" enctype="multipart/form-data" action="/web/binary/upload_attachment">
                 <input type="hidden" name="session_id" t-att-value="session.session_id"/>
@@ -1050,20 +1050,12 @@
 <t t-name="FieldBinaryImage">
     <span class="oe_form_field oe_form_field_image">
         <div class="oe_form_field_image_controls oe_form_readonly_hidden">
-            <div class="oe-binary-file-set">
-                <form class="oe-binary-form" t-att-target="widget.iframe"
-                    method="post" enctype="multipart/form-data" action="/web/binary/upload">
-                    <input type="hidden" name="session_id" value=""/>
-                    <input type="hidden" name="callback" t-att-value="widget.iframe"/>
-                    <button class="oe_button" type="button" title="Set Image">
-                        <img t-att-src='_s + "/web/static/src/img/icons/STOCK_DIRECTORY.png"'/>
-                    </button>
-                    <input type="file" class="oe-binary-file" name="ufile"
-                        t-att-tabindex="widget.node.attrs.tabindex"
-                        t-att-autofocus="widget.node.attrs.autofocus"
-                    />
-                </form>
-            </div>
+            <t t-call="HiddenInputFile">
+                <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
+                <button class="oe_button" type="button" title="Set Image">
+                    <img t-att-src='_s + "/web/static/src/img/icons/STOCK_DIRECTORY.png"'/>
+                </button>
+            </t>
             <button class="oe_button oe-binary-file-clear" type="button" title="Clear">
                 <img t-att-src='_s + "/web/static/src/img/icons/STOCK_MISSING_IMAGE.png"'/>
             </button>
@@ -1071,7 +1063,6 @@
                 <img t-att-src='_s + "/web/static/src/img/throbber.gif"' width="16" height="16"/>
                 <b>Uploading ...</b>
             </div>
-            <iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"/>
         </div>
     </span>
 </t>
@@ -1099,18 +1090,14 @@
                 <table cellspacing="0" cellpadding="0" border="0">
                 <tr>
                     <td>
-                        <div class="oe-binary-file-set" style="width: 80px; height:22px;">
-                            <form class="oe-binary-form" t-att-target="widget.iframe"
-                                method="post" enctype="multipart/form-data" action="/web/binary/upload">
-                                <input type="hidden" name="session_id" value=""/>
-                                <input type="hidden" name="callback" t-att-value="widget.iframe"/>
-                                <button class="oe_button oe_field_button" type="button" title="Set Image">
-                                    <img t-att-src='_s + "/web/static/src/img/icons/STOCK_DIRECTORY.png"'/>
-                                    <span>Select</span>
-                                </button>
-                                <input type="file" class="oe-binary-file" name="ufile"/>
-                            </form>
-                        </div>
+                        <t t-call="HiddenInputFile">
+                            <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
+                            <t t-set="fileupload_style">width: 83px;</t>
+                            <button class="oe_button oe_field_button" type="button" title="Set Image">
+                                <img t-att-src='_s + "/web/static/src/img/icons/STOCK_DIRECTORY.png"'/>
+                                <span>Select</span>
+                            </button>
+                        </t>
                     </td>
                     <td>
                         <button class="oe_button oe-binary-file-save" type="button" title="Save As">
@@ -1130,7 +1117,6 @@
             <td class="oe-binary-progress" style="display: none" nowrap="true">
                 <img t-att-src='_s + "/web/static/src/img/throbber.gif"' width="16" height="16"/>
                 <b>Uploading ...</b>
-                <iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"/>
             </td>
         </tr>
         </table>
@@ -1141,6 +1127,18 @@
         </span>
     </t>
 </t>
+<t t-name="HiddenInputFile">
+    <div class="oe_hidden_input_file" t-att-style="fileupload_style">
+        <form class="oe-binary-form" t-att-target="fileupload_id"
+            method="post" enctype="multipart/form-data" action="/web/binary/upload">
+            <input type="hidden" name="session_id" value=""/>
+            <input type="hidden" name="callback" t-att-value="fileupload_id"/>
+            <t t-raw="__content__"/>
+            <input type="file" class="oe-binary-file" name="ufile"/>
+        </form>
+        <iframe t-att-id="fileupload_id" t-att-name="fileupload_id" style="display: none"/>
+    </div>
+</t>
 <t t-name="WidgetButton">
     <button type="button" class="oe_button oe_form_button"
         t-att-tabindex="widget.node.attrs.tabindex"