From 9dec7ba7e9edc905b121d2aa6f6d0922ef4121b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Theys?= Date: Mon, 20 May 2019 14:12:38 +0000 Subject: [PATCH] [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) --- .../src/js/partner_autocomplete_core.js | 7 ++---- addons/point_of_sale/static/src/js/screens.js | 11 +++------- addons/web/static/src/js/core/utils.js | 22 +++++++++++++++++++ .../web/static/src/js/fields/basic_fields.js | 7 ++---- .../src/js/widgets/name_and_signature.js | 9 ++++---- .../static/src/js/wysiwyg/plugin/dropzone.js | 7 +++--- .../static/src/js/website_forum.js | 9 ++++---- .../static/src/js/slides_upload.js | 10 ++++----- 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 @@ -278,6 +278,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). * 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();