From 279d206a64d92f9acfb4ad330fe8a39ea6c1c7dd Mon Sep 17 00:00:00 2001
From: Fabien Meghazi <fme@openerp.com>
Date: Thu, 19 May 2011 00:36:16 +0200
Subject: [PATCH] [ADD] Added upload of image. (WIP)

bzr revid: fme@openerp.com-20110518223616-axty8elieyq3ccqt
---
 addons/base/static/src/css/base.css | 22 ++++++++++++++++++++
 addons/base/static/src/js/form.js   | 23 +++++++++++++++++++++
 addons/base/static/src/xml/base.xml | 31 ++++++++++++++++++++---------
 3 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/addons/base/static/src/css/base.css b/addons/base/static/src/css/base.css
index 7b81d0d68a5..e84309217af 100644
--- a/addons/base/static/src/css/base.css
+++ b/addons/base/static/src/css/base.css
@@ -1,4 +1,5 @@
 /* TODO: separate openerp web client page css from openerp views css */
+
 body {
     padding: 0;
     margin: 0;
@@ -621,6 +622,27 @@ body.openerp {
     -moz-background-origin: content-box;
     -webkit-background-origin: content-box;
 }
+/* http://www.quirksmode.org/dom/inputfile.html
+ * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
+ */
+.openerp button.oe-binary-image-set {
+    overflow: hidden;
+    position: relative;
+}
+.openerp input.oe-binary-file {
+    z-index: 2;
+    line-height: 0;
+    font-size: 50px;
+    position: absolute;
+    /* Should be adjusted for all browsers */
+    top: -2px;
+    left: -700px;
+    opacity: 0;
+    filter: alpha(opacity = 0);
+    -ms-filter: "alpha(opacity=0)";
+    margin: 0;
+    padding:0;
+}
 
 /* Widgets */
 .openerp .separator {
diff --git a/addons/base/static/src/js/form.js b/addons/base/static/src/js/form.js
index 112f790452a..25f719d6e55 100644
--- a/addons/base/static/src/js/form.js
+++ b/addons/base/static/src/js/form.js
@@ -1191,13 +1191,36 @@ openerp.base.form.FieldImage = openerp.base.form.Field.extend({
     init: function(view, node) {
         this._super(view, node);
         this.template = "FieldImage";
+        this.iframe = this.element_id + '_iframe';
     },
     start: function() {
         this._super.apply(this, arguments);
+        this.$element.find('input.oe-binary-file').change(this.on_file_change);
         this.$element.find('button.oe-binary-image-clear').click(this.on_clear);
     },
     set_value_from_ui: function() {
     },
+    on_file_change: function() {
+        window[this.iframe] = this.on_file_uploaded;
+        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.toggle_throbbler();
+    },
+    toggle_throbbler: function() {
+        this.$element.find('div.oe-binary-progress, div.oe-binary-image-buttons').toggle();
+    },
+    on_file_uploaded: function(size, name, content_type) {
+        delete(window[this.iframe]);
+        if (size === false) {
+            this.notification.warn("File Upload", "There was a problem while uploading your file");
+            // TODO: use openerp web exception handler
+            console.log("Error while uploading file : ", name);
+        } else {
+            alert('File uploaded')
+            console.log("Size", size, "Name", name, "Content", content_type);
+        }
+        this.toggle_throbbler();
+    },
     on_clear: function() {
         if (this.value !== false) {
             this.value = false;
diff --git a/addons/base/static/src/xml/base.xml b/addons/base/static/src/xml/base.xml
index 6668697b38c..a89f0210ad7 100644
--- a/addons/base/static/src/xml/base.xml
+++ b/addons/base/static/src/xml/base.xml
@@ -401,15 +401,28 @@
     </tr>
     <tr>
         <td align="center" valign="bottom" height="25">
-            <button class="button oe-binary-image-set" type="button" title="Set Image">
-                <img src="/base/static/src/img/icons/STOCK_DIRECTORY.png"/>
-            </button>
-            <!--<button class="button oe-binary-image-save" type="button" title="Save As">
-                <img src="/base/static/src/img/icons/gtk-save.png"/>
-            </button>-->
-            <button class="button oe-binary-image-clear" type="button" title="Clear">
-                <img src="/base/static/src/img/icons/STOCK_MISSING_IMAGE.png"/>
-            </button>
+            <div class="oe-binary-image-buttons">
+                <!-- TODO: input@type=file inside a button won't work in firefox. Use links instead -->
+                <button class="button oe-binary-image-set" type="button" title="Set Image">
+                    <img src="/base/static/src/img/icons/STOCK_DIRECTORY.png"/>
+                    <form class="oe-binary-form" t-att-target="widget.iframe"
+                            method="post" enctype="multipart/form-data" action="/base/formview/upload">
+                        <input type="hidden" name="session_id" value=""/>
+                        <input type="hidden" name="callback" t-att-value="widget.iframe"/>
+                        <input type="file" class="oe-binary-file" name="ufile"/>
+                    </form>
+                </button>
+                <!--<button class="button oe-binary-image-save" type="button" title="Save As">
+                    <img src="/base/static/src/img/icons/gtk-save.png"/>
+                </button>-->
+                <button class="button oe-binary-image-clear" type="button" title="Clear">
+                    <img src="/base/static/src/img/icons/STOCK_MISSING_IMAGE.png"/>
+                </button>
+            </div>
+            <div class="oe-binary-progress" style="display: none">
+                Uploading ...
+            </div>
+            <iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"> </iframe>
         </td>
     </tr>
     </table>