diff --git a/addons/test_website/data/test_website_data.xml b/addons/test_website/data/test_website_data.xml
index 13458ee61ae..3217fcf42f1 100644
--- a/addons/test_website/data/test_website_data.xml
+++ b/addons/test_website/data/test_website_data.xml
@@ -122,9 +122,6 @@
test_website.test_image_progress
-
-
-
diff --git a/addons/test_website/static/src/js/mock_image_widget.js b/addons/test_website/static/src/js/mock_image_widget.js
deleted file mode 100644
index 9e2afd1c2a0..00000000000
--- a/addons/test_website/static/src/js/mock_image_widget.js
+++ /dev/null
@@ -1,41 +0,0 @@
-odoo.define('test_website.mock_image_widgets', function (require) {
-'use strict';
-
-const widgetsMedia = require('wysiwyg.widgets.media');
-
-widgetsMedia.FileWidget.include({
-
- //--------------------------------------------------------------------------
- // Private
- //--------------------------------------------------------------------------
-
- _onFileInputChange: function () {
- function getFileFromB64(fileData) {
- const binary = atob(fileData[2]);
- let len = binary.length;
- const arr = new Uint8Array(len);
- while (len--) {
- arr[len] = binary.charCodeAt(len);
- }
- return new File([arr], fileData[1], {type: fileData[0]});
- }
-
- let files = [
- getFileFromB64(['image/png', 'image.png', "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAApElEQVR42u3RAQ0AAAjDMO5fNCCDkC5z0HTVrisFCBABASIgQAQEiIAAAQJEQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAQECBAgAgJEQIAIyPcGFY7HnV2aPXoAAAAASUVORK5CYII="]),
- getFileFromB64(['image/jpeg', 'image.jpeg', "/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7STxsVUtLVWx9aWNpfZeHh5e+tb75+f8BDQ0NDQ4NDhAQDhQWExYUHhsZGRseLSAiICIgLUQqMioqMipEPEk7NztJPGxVS0tVbH1pY2l9l4eHl761vvn5///CABEIAEsASwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABv/aAAgBAQAAAACHAAAAAAAAAAAAAAAAH//EABUBAQEAAAAAAAAAAAAAAAAAAAAH/9oACAECEAAAAKYAAAB//8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/2gAIAQMQAAAAngAAAf/EABQQAQAAAAAAAAAAAAAAAAAAAGD/2gAIAQEAAT8ASf/EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQIBAT8AT//EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQMBAT8AT//Z"]),
- getFileFromB64(['image/vnd.microsoft.icon', 'icon.ico', "AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAA=="]),
- getFileFromB64(['image/webp', 'image.webp', "UklGRhwAAABXRUJQVlA4TBAAAAAvE8AEAAfQhuh//wMR0f8A"]),
- ];
-
- if (!this.options.multiImages) {
- if (this.media.classList.contains('o_mock_show_error')) {
- files = [files[2]];
- } else {
- files = [files[0]];
- }
- }
- this.$fileInput = [{'files': files}];
- return this._super(...arguments);
- }
-});
-});
diff --git a/addons/test_website/static/tests/tours/image_upload_progress.js b/addons/test_website/static/tests/tours/image_upload_progress.js
index 4976752aeb9..2449a54353c 100644
--- a/addons/test_website/static/tests/tours/image_upload_progress.js
+++ b/addons/test_website/static/tests/tours/image_upload_progress.js
@@ -3,34 +3,76 @@ odoo.define('test_website.image_upload_progress', function (require) {
const tour = require('web_tour.tour');
+const { FileSelectorControlPanel } = require('@web_editor/components/media_dialog/file_selector');
+const { patch, unpatch } = require('web.utils');
+
+let patchWithError = false;
+const patchMediaDialog = () => patch(FileSelectorControlPanel.prototype, 'test_website.mock_image_widgets', {
+ async onChangeFileInput() {
+ const getFileFromB64 = (fileData) => {
+ const binary = atob(fileData[2]);
+ let len = binary.length;
+ const arr = new Uint8Array(len);
+ while (len--) {
+ arr[len] = binary.charCodeAt(len);
+ }
+ return new File([arr], fileData[1], {type: fileData[0]});
+ };
+
+ let files = [
+ getFileFromB64(['image/vnd.microsoft.icon', 'icon.ico', "AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAA=="]),
+ getFileFromB64(['image/webp', 'image.webp', "UklGRhwAAABXRUJQVlA4TBAAAAAvE8AEAAfQhuh//wMR0f8A"]),
+ getFileFromB64(['image/png', 'image.png', "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAApElEQVR42u3RAQ0AAAjDMO5fNCCDkC5z0HTVrisFCBABASIgQAQEiIAAAQJEQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAQECBAgAgJEQIAIyPcGFY7HnV2aPXoAAAAASUVORK5CYII="]),
+ getFileFromB64(['image/jpeg', 'image.jpeg', "/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7STxsVUtLVWx9aWNpfZeHh5e+tb75+f8BDQ0NDQ4NDhAQDhQWExYUHhsZGRseLSAiICIgLUQqMioqMipEPEk7NztJPGxVS0tVbH1pY2l9l4eHl761vvn5///CABEIAEsASwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABv/aAAgBAQAAAACHAAAAAAAAAAAAAAAAH//EABUBAQEAAAAAAAAAAAAAAAAAAAAH/9oACAECEAAAAKYAAAB//8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/2gAIAQMQAAAAngAAAf/EABQQAQAAAAAAAAAAAAAAAAAAAGD/2gAIAQEAAT8ASf/EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQIBAT8AT//EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQMBAT8AT//Z"]),
+ ];
+
+ if (!this.props.multiImages) {
+ if (patchWithError) {
+ files = [files[0]];
+ } else {
+ files = [files[2]];
+ }
+ }
+ await this.props.uploadFiles(files);
+ }
+});
+
+const unpatchMediaDialog = () => unpatch(FileSelectorControlPanel.prototype, 'test_website.mock_image_widgets');
+
const setupSteps = [{
+ content: "reload to load patch",
+ trigger: ".o_website_preview",
+ run: () => {
+ patchMediaDialog();
+ },
+}, {
content: "enter edit mode",
- trigger: "a[data-action=edit]"
+ trigger: ".o_edit_website_container a"
}, {
content: "drop a snippet",
trigger: "#oe_snippets .oe_snippet[name='Text - Image'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
- extra_trigger: "body.editor_enable.editor_has_snippets",
- moveTrigger: ".oe_drop_zone",
- run: "drag_and_drop #wrap",
+ extra_trigger: "body.editor_has_snippets",
+ moveTrigger: "iframe .oe_drop_zone",
+ run: "drag_and_drop iframe #wrap",
}, {
content: "drop a snippet",
trigger: "#oe_snippets .oe_snippet[name='Image Gallery'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
- extra_trigger: "body.editor_enable.editor_has_snippets",
+ extra_trigger: "body.editor_has_snippets",
moveTrigger: ".oe_drop_zone",
- run: "drag_and_drop #wrap",
+ run: "drag_and_drop iframe #wrap",
}];
const formatErrorMsg = "format is not supported. Try with: .gif, .jpe, .jpeg, .jpg, .png, .svg";
tour.register('test_image_upload_progress', {
- url: '/test_image_progress',
+ url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
test: true
}, [
...setupSteps,
// 1. Check multi image upload
{
content: "click on dropped snippet",
- trigger: "#wrap .s_image_gallery .img",
+ trigger: "iframe #wrap .s_image_gallery .img",
}, {
content: "click on add images to open image dialog (in multi mode)",
trigger: 'we-customizeblock-option [data-add-images]',
@@ -38,11 +80,9 @@ tour.register('test_image_upload_progress', {
content: "manually trigger input change",
trigger: ".o_select_media_dialog .o_upload_media_button",
run: () => {
- const fileInput = $('.o_select_media_dialog .o_file_input').first();
// This will trigger upload of dummy files for test purpose, as a
// test can't select local files to upload into the input.
- // See `mock_image_widgets`.
- fileInput.change();
+ document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
},
}, {
content: "check upload progress bar is correctly shown (1)",
@@ -85,20 +125,17 @@ tour.register('test_image_upload_progress', {
// 2. Check success single image upload
{
content: "click on dropped snippet",
- trigger: "#wrap .s_text_image .img",
+ trigger: "iframe #wrap .s_text_image .img",
}, {
content: "click on replace media to open image dialog",
trigger: 'we-customizeblock-option [data-replace-media]',
}, {
content: "manually trigger input change",
trigger: ".o_select_media_dialog .o_upload_media_button",
- in_modal: false,
run: () => {
- const fileInput = $('.o_select_media_dialog .o_file_input').first();
// This will trigger upload of dummy files for test purpose, as a
// test can't select local files to upload into the input.
- // See `mock_image_widgets`.
- fileInput.change();
+ document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
},
}, {
content: "check upload progress bar is correctly shown",
@@ -126,7 +163,7 @@ tour.register('test_image_upload_progress', {
// 3. Check error single image upload
{
content: "click on dropped snippet",
- trigger: "#wrap .s_text_image .img",
+ trigger: "iframe #wrap .s_text_image .img",
}, {
content: "click on replace media to open image dialog",
trigger: 'we-customizeblock-option [data-replace-media]',
@@ -135,18 +172,19 @@ tour.register('test_image_upload_progress', {
trigger: ".o_select_media_dialog .o_upload_media_button",
in_modal: false,
run: () => {
- $("#wrap .s_text_image .img").addClass('o_mock_show_error');
- const fileInput = $('.o_select_media_dialog .o_file_input').first();
+ patchWithError = true;
// This will trigger upload of dummy files for test purpose, as a
// test can't select local files to upload into the input.
- // See `mock_image_widgets`.
- fileInput.change();
+ document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
+
},
}, {
content: "check upload progress bar is correctly shown",
trigger: `.o_we_progressbar:contains('icon.ico'):contains('${formatErrorMsg}')`,
in_modal: false,
- run: function () {}, // it's a check
+ run: function () {
+ patchWithError = false;
+ },
}, {
content: "there should only have one notification toaster",
trigger: ".o_notification",
@@ -156,20 +194,21 @@ tour.register('test_image_upload_progress', {
if (notificationCount !== 1) {
console.error("There should be one noficiation toaster opened, and only one.");
}
+ unpatchMediaDialog();
}
},
]);
tour.register('test_image_upload_progress_unsplash', {
- url: '/test_image_progress',
+ url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
test: true
}, [
...setupSteps,
// 1. Check multi image upload
{
content: "click on dropped snippet",
- trigger: "#wrap .s_image_gallery .img",
+ trigger: "iframe #wrap .s_image_gallery .img",
}, {
content: "click on replace media to open image dialog",
trigger: 'we-customizeblock-option [data-replace-media]',
@@ -179,7 +218,7 @@ tour.register('test_image_upload_progress_unsplash', {
run: "text fox",
}, {
content: "click on unsplash result", // note that unsplash is mocked
- trigger: ".o_unsplash_attachment_cell"
+ trigger: "img[alt~=fox]"
}, {
content: "check that the upload progress bar is correctly shown",
// ensure it is there so we are sure next step actually test something
@@ -193,7 +232,10 @@ tour.register('test_image_upload_progress_unsplash', {
in_modal: false,
}, {
content: "unsplash image (mocked to logo) should have been used",
- trigger: "#wrap .s_image_gallery .img[data-original-src^='/unsplash/HQqIOc8oYro/fox']",
+ trigger: "iframe #wrap .s_image_gallery .img[data-original-src^='/unsplash/HQqIOc8oYro/fox']",
+ run: () => {
+ unpatchMediaDialog();
+ },
},
]);
diff --git a/addons/test_website/tests/test_image_upload_progress.py b/addons/test_website/tests/test_image_upload_progress.py
index 4d03faa6a59..b77071b8086 100644
--- a/addons/test_website/tests/test_image_upload_progress.py
+++ b/addons/test_website/tests/test_image_upload_progress.py
@@ -13,7 +13,7 @@ from odoo import http
class TestImageUploadProgress(odoo.tests.HttpCase):
def test_01_image_upload_progress(self):
- self.start_tour("/test_image_progress", 'test_image_upload_progress', login="admin")
+ self.start_tour("/web", 'test_image_upload_progress', login="admin")
def test_02_image_upload_progress_unsplash(self):
BASE_URL = self.base_url()
@@ -53,4 +53,4 @@ class TestImageUploadProgress(odoo.tests.HttpCase):
media_library_search.routing_type = 'json'
Web_Editor.media_library_search = http.route(['/web_editor/media_library_search'], type='json', auth="user", website=True)(media_library_search)
- self.start_tour("/", 'test_image_upload_progress_unsplash', login="admin")
+ self.start_tour("/web", 'test_image_upload_progress_unsplash', login="admin")
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index 82df7ee24d9..b43b1961624 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -79,6 +79,7 @@ export class MediaDialog extends Dialog {
resModel: this.props.resModel,
resId: this.props.resId,
media: this.props.media,
+ multiImages: this.props.multiImages,
selectedMedia: this.selectedMedia,
selectMedia: (...args) => this.selectMedia(...args, tab.id, additionalProps.multiSelect),
save: this.save.bind(this),
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
index 4cd99e20832..a6461870c8b 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
@@ -9,8 +9,6 @@ var ImageCropWidget = require('wysiwyg.widgets.ImageCropWidget');
const LinkPopoverWidget = require('@web_editor/js/wysiwyg/widgets/link_popover_widget')[Symbol.for("default")];
const {ColorpickerDialog} = require('web.Colorpicker');
-var media = require('wysiwyg.widgets.media');
-
return {
Dialog: Dialog,
AltDialog: AltDialog,
@@ -19,13 +17,5 @@ return {
ImageCropWidget: ImageCropWidget,
LinkPopoverWidget: LinkPopoverWidget,
ColorpickerDialog: ColorpickerDialog,
-
- MediaWidget: media.MediaWidget,
- SearchableMediaWidget: media.SearchableMediaWidget,
- FileWidget: media.FileWidget,
- ImageWidget: media.ImageWidget,
- DocumentWidget: media.DocumentWidget,
- IconWidget: media.IconWidget,
- VideoWidget: media.VideoWidget,
};
});