pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* = 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>
This commit is contained in:
Sébastien Theys
2019-05-21 11:37:20 +00:00
parent 923701851e
commit 9dec7ba7e9
8 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/partner_autocomplete/static/src/js/partner_autocomplete_core.js
+2 -5
View File
@@ -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';
addons/point_of_sale/static/src/js/screens.js
+3 -8
View File
@@ -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,
addons/web/static/src/js/core/utils.js
+22
View File
@@ -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).
*
addons/web/static/src/js/fields/basic_fields.js
+2 -5
View File
@@ -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();
}
addons/web/static/src/js/widgets/name_and_signature.js
+4 -5
View File
@@ -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
addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js
+3 -4
View File
@@ -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);
});
addons/website_forum/static/src/js/website_forum.js
+4 -5
View File
@@ -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();
},
/**
addons/website_slides/static/src/js/slides_upload.js
+4 -6
View File
@@ -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();