I'm trying to override this Odoo JS function to remove the user notification, because it keeps appearing even there is no problem with the file, preview working fine. I used extend but it's not working, the debugger mode skipped var FieldBinaryImage
located in : addons/web/static/src/legacy/js/fields/basic_fields.js
/* global ace */
odoo.define('web.basic_fields', function (require) {
"use strict";
/**
* This module contains most of the basic (meaning: non relational) field
* widgets. Field widgets are supposed to be used in views inheriting from
* BasicView, so, they can work with the records obtained from a BasicModel.
*/
var AbstractField = require('web.AbstractField');
var config = require('web.config');
var core = require('web.core');
var datepicker = require('web.datepicker');
var deprecatedFields = require('web.basic_fields.deprecated');
var dom = require('web.dom');
var Domain = require('web.Domain');
var DomainSelector = require('web.DomainSelector');
var DomainSelectorDialog = require('web.DomainSelectorDialog');
var framework = require('web.framework');
var py_utils = require('web.py_utils');
var session = require('web.session');
/**
* I need to override the below function
*/
var FieldBinaryImage = AbstractFieldBinary.extend({
description: _lt("Image"),
fieldDependencies: _.extend({}, AbstractFieldBinary.prototype.fieldDependencies, {
__last_update: {type: 'datetime'},
}),
template: 'FieldBinaryImage',
placeholder: "/web/static/img/placeholder.png",
events: _.extend({}, AbstractFieldBinary.prototype.events, {
'click img': function () {
if (this.mode === "readonly") {
this.trigger_up('bounce_edit');
}
},
}),
supportedFieldTypes: ['binary'],
file_type_magic_word: {
'/': 'jpg',
'R': 'gif',
'i': 'png',
'P': 'svg+xml',
},
accepted_file_extensions: 'image/*',
/**
* I need a just comment a line in this function
*/
_render: function () {
var self = this;
var url = this.placeholder;
if (this.value) {
if (!utils.is_bin_size(this.value)) {
// Use magic-word technique for detecting image type
url = 'data:image/' + (this.file_type_magic_word[this.value[0]] || 'png') + ';base64,' + this.value;
} else {
var field = this.nodeOptions.preview_image || this.name;
var unique = this.recordData.__last_update;
url = this._getImageUrl(this.model, this.res_id, field, unique);
}
}
var $img = $(qweb.render("FieldBinaryImage-img", {widget: this, url: url}));
var width = this.nodeOptions.size ? this.nodeOptions.size[0] : this.attrs.width;
var height = this.nodeOptions.size ? this.nodeOptions.size[1] : this.attrs.height;
if (width) {
$img.attr('width', width);
$img.css('max-width', width + 'px');
if (!height) {
$img.css('height', 'auto');
$img.css('max-height', '100%');
}
}
if (height) {
$img.attr('height', height);
$img.css('max-height', height + 'px');
if (!width) {
$img.css('width', 'auto');
$img.css('max-width', '100%');
}
}
this.$('> img').remove();
this.$el.prepend($img);
$img.one('error', function () {
$img.attr('src', self.placeholder);
console.log('innnnnnnnn original ');
// I want to comment the below line, I don't want to show error user notification
self.displayNotification({ message: _t("Could not display the selected image"), type: 'danger' });
});
return this._super.apply(this, arguments);
},
I tried
odoo.define('dms.basic_fields', function (require) {
"use strict";
console.log('inside // done '); // showed in console
var basic_fields = require('web.basic_fields');
var core = require('web.core');
var field_registry = require('web.field_registry');
var FieldBinaryImage = basic_fields.FieldBinaryImage;
var utils = require('web.utils');
var qweb = core.qweb;
var _t = core._t;
var _lt = core._lt;
// In debug mode, it does not even enter to FieldBinaryImageX when I used extend instead of include
// Now I am using include but I get $img not defined and value not defined and many other errors
var FieldBinaryImageX = FieldBinaryImage.include({
// Override the _render method
_render: function () {
console.log('inside rener // Noooo :( '); // not showed in console means it did not reach here
// called super
this._super.apply(this, arguments);
// same code I just commented the line
var self = this;
var url = this.placeholder;
if (this.value) {
if (!utils.is_bin_size(this.value)) {
// Use magic-word technique for detecting image type
url = 'data:image/' + (this.file_type_magic_word[this.value[0]] || 'png') + ';base64,' + this.value;
} else {
var field = this.nodeOptions.preview_image || this.name;
var unique = this.recordData.__last_update;
url = this._getImageUrl(this.model, this.res_id, field, unique);
}
}
var $img = $(qweb.render("FieldBinaryImage-img", {widget: this, url: url}));
// override css size attributes (could have been defined in css files)
// if specified on the widget
var width = this.nodeOptions.size ? this.nodeOptions.size[0] : this.attrs.width;
var height = this.nodeOptions.size ? this.nodeOptions.size[1] : this.attrs.height;
if (width) {
$img.attr('width', width);
$img.css('max-width', width + 'px');
if (!height) {
$img.css('height', 'auto');
$img.css('max-height', '100%');
}
}
if (height) {
$img.attr('height', height);
$img.css('max-height', height + 'px');
if (!width) {
$img.css('width', 'auto');
$img.css('max-width', '100%');
}
}
this.$('> img').remove();
this.$el.prepend($img);
$img.one('error', function () {
$img.attr('src', self.placeholder);
console.log('innnnnnnnn original ');
// self.displayNotification({ message: _t("Could not display the selected image"), type: 'danger' });
});
},
});
// Register the custom widget
field_registry.add('FieldBinaryImage', FieldBinaryImageX);
return FieldBinaryImageX;
});
Please assist me and thank you in advance.
Check first if image files are corrupted
To create a js module, use the Native Javascript Modules system:
Most new Odoo javascript code should use the native javascript module system. This is simpler, and brings the benefits of a better developer experience with a better integration with the IDE.
To create a new image widget, extend the FieldBinaryImage as follows:
/** @odoo-module */
import fieldRegistry from 'web.field_registry';
import basicFields from 'web.basic_fields';
import utils from 'web.utils';
import core from 'web.core';
var qweb = core.qweb;
var CustomFieldBinaryImage = basicFields.FieldBinaryImage.extend({
_render: function () {
},
});
fieldRegistry.add('custom_binary_image', CustomFieldBinaryImage);
To override the _render function, you can use include (Don't add to registry or return):
basicFields.FieldBinaryImage.include({
_render: function() {
},
});