[ADD] Binary image working under chrome

bzr revid: fme@openerp.com-20110519101726-valkxw6v6zpwbpyi

addons/base/controllers/main.py

@@ -571,7 +571,13 @@ class FormView(View):
         return open(os.path.join(openerpweb.path_addons, 'base', 'static', 'src', 'img', 'placeholder.png'), 'rb').read()
 
     @openerpweb.httprequest
-    def upload(self, request, session_id, callback, ufile):
+    def upload(self, request, session_id, callback, ufile=None):
+        cherrypy.response.timeout = 500
+        headers = {}
+        for key, val in cherrypy.request.headers.iteritems():
+            headers[key.lower()] = val
+        size = int(headers.get('content-length', 0))
+        # TODO: might be usefull to have a configuration flag for max-lenght file uploads
         try:
             out = """<script language="javascript" type="text/javascript">
                         var win = window.top.window,
@@ -585,18 +591,11 @@ class FormView(View):
                             });
                         }
                     </script>"""
-            size = 0
-            while True:
-                data = ufile.file.read(8192)
-                if not data:
-                    break
-                size += len(data)
-            filename = ufile.filename
-            # TODO: write file to tmp file
+            data = ufile.file.read()
+            args = [size, ufile.filename, ufile.headers.getheader('Content-Type'), base64.encodestring(data)]
         except Exception as e:
-            size = False
-            filename = e.message
-        return out % (simplejson.dumps(callback), simplejson.dumps([size, filename, ufile.headers.getheader('Content-Type')]))
+            args = [False, e.message]
+        return out % (simplejson.dumps(callback), simplejson.dumps(args))
 
 class ListView(View):
     _cp_path = "/base/listview"

addons/base/static/src/css/base.css

@@ -1,5 +1,4 @@
 /* TODO: separate openerp web client page css from openerp views css */
-
 body {
     padding: 0;
     margin: 0;

addons/base/static/src/js/form.js

@@ -1200,26 +1200,34 @@ openerp.base.form.FieldImage = openerp.base.form.Field.extend({
     },
     set_value_from_ui: function() {
     },
+    set_image_maxwidth: function() {
+        this.$element.find('img.oe-binary-image').css('max-width', this.$element.width());
+    },
     on_file_change: function() {
+        this.set_image_maxwidth();
+        // 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;
         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();
+        this.toggle_throbber();
     },
-    toggle_throbbler: function() {
+    toggle_throbber: function() {
         this.$element.find('div.oe-binary-progress, div.oe-binary-image-buttons').toggle();
     },
-    on_file_uploaded: function(size, name, content_type) {
+    on_file_uploaded: function(size, name, content_type, img) {
         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.value = img;
+            this.$element.find('img.oe-binary-image').attr('src', 'data:' + (content_type || 'image/png') + ';base64,' + img);
+            this.on_ui_change();
         }
-        this.toggle_throbbler();
+        this.toggle_throbber();
     },
     on_clear: function() {
         if (this.value !== false) {
@@ -1227,9 +1235,11 @@ openerp.base.form.FieldImage = openerp.base.form.Field.extend({
             this.$element.find('img.oe-binary-image').attr('src', '/base/static/src/img/placeholder.png');
             this.on_ui_change();
         }
+        return false;
     },
     set_value: function(value) {
         this._super.apply(this, arguments);
+        this.set_image_maxwidth();
         var url = '/base/formview/image?session_id=' + this.session.session_id + '&model=' +
             this.view.dataset.model +'&id=' + (this.view.datarecord.id || '') + '&field=' + this.name + '&t=' + (new Date().getTime())
         this.$element.find('img.oe-binary-image').attr('src', url);

addons/base/static/src/xml/base.xml

@@ -420,7 +420,8 @@
                 </button>
             </div>
             <div class="oe-binary-progress" style="display: none">
-                Uploading ...
+                <img src="/base/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"> </iframe>
         </td>