Merge pull request #391 from Tecnativa/8.0-web_widget_image_download-improve_file_extension

[8.0][IMP][web_widget_image_download] save image with the correct type

web_widget_image_download/README.rst

@@ -22,6 +22,12 @@ To use this module, you need to:
    :alt: Try me on Runbot
    :target: https://runbot.odoo-community.org/runbot/162/8.0
 
+Known Issues / Roadmap
+======================
+
+* In order to work correctly, this widget has to detect image type, the server should include this information in the `Content-Type` header. Right now, odoo is not doing so, but a fix has been `proposed <https://github.com/odoo/odoo/pull/12918>`_.
+* For some unknown reason, the widget does not work in the `Preferences` view, because odoo is not rendering the **QWeb** template.
+
 Bug Tracker
 ===========
 
@@ -33,11 +39,6 @@ help us smashing it by providing a detailed and welcomed feedback.
 Credits
 =======
 
-Images
-------
-
-* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
-
 Contributors
 ------------
 

web_widget_image_download/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Copyright 2016 Flavio Corpa <flavio.corpa@tecnativa.com>
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).

web_widget_image_download/__openerp__.py

@@ -3,7 +3,7 @@
 # License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
 {
     "name": "Web Widget - Image Download",
-    "summary": "Allows to download the avatar for the contact",
+    "summary": "Allows to download any image from its widget",
     "version": "8.0.1.0.0",
     "category": "web",
     "website": "https://www.tecnativa.com",

web_widget_image_download/static/src/js/web_widget_image_download.js

@@ -2,15 +2,36 @@
  * Copyright 2016 Flavio Corpa <flavio.corpa@tecnativa.com>
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
  */
-openerp.web_widget_image_download = function(instance) {
+openerp.web_widget_image_download = function (instance) {
     'use strict';
 
     instance.web.form.web_widget_image_download = instance.web.form.FieldBinaryImage.include({
-        render_value() {
+        render_value: function () {
             this._super();
 
-            // take image URI from preceding <img> tag
-            this.$el.find('.oe_form_binary_file_download').attr('href', $('img[name="image"]').attr('src'));
+            var $widget = this.$el.find('.oe_form_binary_file_download');
+
+            this.imgSrc = this.$el.find('img[name="image"]').attr('src');
+
+            $.ajax({
+                type: 'HEAD',
+                url: this.imgSrc,
+                complete: function (xhr) {
+                    // retrieve image type from server ("Content-Type" header)
+                    $widget.attr('download', xhr.getResponseHeader("Content-Type").replace('/', '.'));
+                }
+            });
+
+            // use jquery instead of `replace` with qweb (to avoid breaking inheritance)
+            if (this.has_custom_image()) {
+                this.$el.find('.oe_form_binary_file_clear').removeClass('col-md-offset-5');
+            }
+
+            $widget.attr('href', this.imgSrc);
+        },
+        has_custom_image: function () {
+            // check if the image of the widget is different from the default placeholder
+            return this.imgSrc && !this.imgSrc.includes('/placeholder.png');
         }
     });
 }

web_widget_image_download/static/src/xml/web_widget_image_download.xml

@@ -5,10 +5,9 @@
 <template>
     <t t-extend="FieldBinaryImage">
         <t t-jquery=".oe_form_binary_file_edit" t-operation="after">
-            <a class="fa fa-download fa-1g col-md-4 oe_form_binary_file_download" title="Download" download="image.png"></a>
-        </t>
-        <t t-jquery=".oe_form_binary_file_clear" t-operation="replace">
-            <i class="fa fa-trash-o fa-1g oe_form_binary_file_clear" title="Clear"/>
+            <t t-if="widget.has_custom_image()">
+                <a class="fa fa-download fa-1g col-md-4 oe_form_binary_file_download" title="Download"></a>
+            </t>
         </t>
     </t>
 </template>