[IMP] web, *: add utils to get dataURL (base64) from file/blob

* = partner_autocomplete, point_of_sale, web_editor,
website_forum, website_slides

This can be used for example to preview an image from a file input field.

It can also be used to send the base64 content of the input by RPC instead of
having to rely on form submit as POST with multipart/form-data.

Technically wrap FileReader.readAsDataURL in a Promise.

This will also be used in task-1930726

PR: #33508

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

8 files changed, 44 insertions, 38 deletions

diff --git a/addons/partner_autocomplete/static/src/js/partner_autocomplete_core.js b/addons/partner_autocomplete/static/src/js/partner_autocomplete_core.js
index 08d0a9a5149..dec3557a3de 100644
--- a/addons/partner_autocomplete/static/src/js/partner_autocomplete_core.js
+++ b/addons/partner_autocomplete/static/src/js/partner_autocomplete_core.js
@@ -5,6 +5,7 @@ var concurrency = require('web.concurrency');
 
 var core = require('web.core');
 var Qweb = core.qweb;
+var utils = require('web.utils');
 var _t = core._t;
 
 /**
@@ -195,11 +196,7 @@ var PartnerAutocompleteMixin = {
         return new Promise(function (resolve, reject) {
             var xhr = new XMLHttpRequest();
             xhr.onload = function () {
-                var reader = new FileReader();
-                reader.onloadend = function () {
-                    resolve(reader.result);
-                };
-                reader.readAsDataURL(xhr.response);
+                utils.getDataURLFromFile(xhr.response).then(resolve);
             };
             xhr.open('GET', url);
             xhr.responseType = 'blob';
diff --git a/addons/point_of_sale/static/src/js/screens.js b/addons/point_of_sale/static/src/js/screens.js
index 78b7d2947eb..3e9f97ea18a 100644
--- a/addons/point_of_sale/static/src/js/screens.js
+++ b/addons/point_of_sale/static/src/js/screens.js
@@ -1433,21 +1433,16 @@ var ClientListScreenWidget = ScreenWidget.extend({
             });
             return;
         }
-        
-        var reader = new FileReader();
-        reader.onload = function(event){
-            var dataurl = event.target.result;
+        utils.getDataURLFromFile(file).then(function (dataurl) {
             var img     = new Image();
             img.src = dataurl;
             self.resize_image_to_dataurl(img,800,600,callback);
-        };
-        reader.onerror = function(){
+        }).guardedCatch(function () {
             self.gui.show_popup('error',{
                 title :_t('Could Not Read Image'),
                 body  :_t('The provided file could not be read due to an unknown error'),
             });
-        };
-        reader.readAsDataURL(file);
+        });
     },
 
     // This fetches partner changes on the server, and in case of changes, 
diff --git a/addons/web/static/src/js/core/utils.js b/addons/web/static/src/js/core/utils.js
index 44e09933a25..44e17324b85 100644
--- a/addons/web/static/src/js/core/utils.js
+++ b/addons/web/static/src/js/core/utils.js
@@ -279,6 +279,28 @@ var utils = {
         return "";
     },
     /**
+     * Gets dataURL (base64 data) from the given file or blob.
+     * Technically wraps FileReader.readAsDataURL in Promise.
+     *
+     * @param {Blob|File} file
+     * @returns {Promise} resolved with the dataURL, or rejected if the file is
+     *  empty or if an error occurs.
+     */
+    getDataURLFromFile: function (file) {
+        if (!file) {
+            return Promise.reject();
+        }
+        return new Promise(function (resolve, reject) {
+            var reader = new FileReader();
+            reader.addEventListener('load', function () {
+                resolve(reader.result);
+            });
+            reader.addEventListener('abort', reject);
+            reader.addEventListener('error', reject);
+            reader.readAsDataURL(file);
+        });
+    },
+    /**
      * Returns a human readable number (e.g. 34000 -> 34k).
      *
      * @param {number} number
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 713ade2a989..f4a518e28ea 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1465,13 +1465,10 @@ var AbstractFieldBinary = AbstractField.extend({
                     this.do_warn(_t("File upload"), _.str.sprintf(msg, utils.human_size(this.max_upload_size)));
                     return false;
                 }
-                var filereader = new FileReader();
-                filereader.readAsDataURL(file);
-                filereader.onloadend = function (upload) {
-                    var data = upload.target.result;
+                utils.getDataURLFromFile(file).then(function (data) {
                     data = data.split(',')[1];
                     self.on_file_uploaded(file.size, file.name, file.type, data);
-                };
+                });
             } else {
                 this.$('form.o_form_binary_form').submit();
             }
diff --git a/addons/web/static/src/js/widgets/name_and_signature.js b/addons/web/static/src/js/widgets/name_and_signature.js
index 7c3f05a7148..57a9a697494 100644
--- a/addons/web/static/src/js/widgets/name_and_signature.js
+++ b/addons/web/static/src/js/widgets/name_and_signature.js
@@ -2,6 +2,7 @@ odoo.define('web.name_and_signature', function (require) {
 'use strict';
 
 var core = require('web.core');
+var utils = require('web.utils');
 var Widget = require('web.Widget');
 
 var _t = core._t;
@@ -597,11 +598,9 @@ var NameAndSignature = Widget.extend({
         }
         this.$loadInvalid.addClass('d-none');
 
-        var reader = new FileReader();
-        reader.onload = function (ev) {
-            self._printImage(reader.result);
-        };
-        reader.readAsDataURL(f);
+        utils.getDataURLFromFile(f).then(function (result) {
+            self._printImage(result);
+        });
     },
     /**
      * Handles input on name field: if the @see mode is 'auto', redraws the
diff --git a/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js b/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js
index 255561b02be..3561f5b071c 100644
--- a/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js
+++ b/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js
@@ -4,6 +4,7 @@ odoo.define('web_editor.wysiwyg.plugin.dropzone', function (require) {
 var core = require('web.core');
 var Plugins = require('web_editor.wysiwyg.plugins');
 var registry = require('web_editor.wysiwyg.plugin.registry');
+var utils = require('web.utils');
 
 var _t = core._t;
 var dom = $.summernote.dom;
@@ -83,9 +84,8 @@ var DropzonePlugin = Plugins.dropzone.extend({
             // save images as attachments
             var def = new Promise(function (resolve) {
                 // Get image's Base64 string
-                var reader = new FileReader();
-                reader.addEventListener('load', function (e) {
-                    self._uploadImage(e.target.result, file.name).then(function (attachment) {
+                utils.getDataURLFromFile(file).then(function (result) {
+                    self._uploadImage(result, file.name).then(function (attachment) {
                         // Make the HTML
                         var image = self.document.createElement('img');
                         image.setAttribute('style', 'width: 100%;');
@@ -97,7 +97,6 @@ var DropzonePlugin = Plugins.dropzone.extend({
                         $(image).trigger('dropped');
                     });
                 });
-                reader.readAsDataURL(file);
             });
             defs.push(def);
         });
diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 8dbc482ae64..5ef38ab9a49 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -5,6 +5,7 @@ var core = require('web.core');
 var Wysiwyg = require('web_editor.wysiwyg.root');
 var publicWidget = require('web.public.widget');
 var session = require('web.session');
+var utils = require('web.utils');
 var qweb = core.qweb;
 var WebsiteProfile = require('website_profile.website_profile');
 
@@ -231,11 +232,9 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
             return;
         }
         var $form = $(ev.currentTarget).closest('form');
-        var reader = new window.FileReader();
-        reader.onload = function (ev) {
-            $form.find('.o_forum_avatar_img').attr('src', ev.target.result);
-        };
-        reader.readAsDataURL(ev.currentTarget.files[0]);
+        utils.getDataURLFromFile(ev.currentTarget.files[0]).then(function (result) {
+            $form.find('.o_forum_avatar_img').attr('src', result);
+        });
         $form.find('#forum_clear_image').remove();
     },
     /**
diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js
index ad1e024d2bf..c5393f07087 100644
--- a/addons/website_slides/static/src/js/slides_upload.js
+++ b/addons/website_slides/static/src/js/slides_upload.js
@@ -4,6 +4,7 @@ odoo.define('website_slides.upload_modal', function (require) {
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var publicWidget = require('web.public.widget');
+var utils = require('web.utils');
 
 var QWeb = core.qweb;
 var _t = core._t;
@@ -401,17 +402,14 @@ var SlideUploadDialog = Dialog.extend({
             this._fileReset();
             return;
         }
-        var BinaryReader = new FileReader();
-        // file read as DataURL
-        BinaryReader.readAsDataURL(file);
-        BinaryReader.onloadend = function (upload) {
-            var buffer = upload.target.result;
+
+        utils.getDataURLFromFile(file).then(function (buffer) {
             if (isImage) {
                 self.$('#slide-image').attr('src', buffer);
             }
             buffer = buffer.split(',')[1];
             self.file.data = buffer;
-        };
+        });
 
         if (file.type === 'application/pdf') {
             var ArrayReader = new FileReader();