Skip to content

Commit eb78142

Browse files
alzotaalzota
committed
ACP2E-2957: refresh image thumbnail when an image with same name is re-uploaded
1 parent 488c103 commit eb78142

File tree

6 files changed

+104
-8
lines changed

6 files changed

+104
-8
lines changed

‎app/code/Magento/Cms/Test/Mftf/ActionGroup/InsertImageFromMediaGalleryFromCmsActionGroup.xml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/************************************************************************
4+
*
5+
* Copyright 2024 Adobe
6+
* All Rights Reserved.
7+
*
8+
* NOTICE: All information contained herein is, and remains
9+
* the property of Adobe and its suppliers, if any. The intellectual
10+
* and technical concepts contained herein are proprietary to Adobe
11+
* and its suppliers and are protected by all applicable intellectual
12+
* property laws, including trade secret and copyright laws.
13+
* Dissemination of this information or reproduction of this material
14+
* is strictly forbidden unless prior written permission is obtained
15+
* from Adobe.
16+
* ************************************************************************
17+
*/
18+
-->
19+
20+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
21+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
22+
<!--Insert image from Media Gallery -->
23+
<actionGroup name="InsertImageFromMediaGalleryFromCmsActionGroup">
24+
<arguments>
25+
<argument name="imageFileName" defaultValue="magento.jpg" type="string"/>
26+
<argument name="imageFilePath" defaultValue="magento.jpg" type="string"/>
27+
</arguments>
28+
<!--Insert image-->
29+
<waitForElementVisible selector="{{MediaGallerySection.UploadImageSelector}}" stepKey="waitAttacheButton"/>
30+
<attachFile selector="{{MediaGallerySection.UploadImageWithUploaderId}}" userInput="{{imageFilePath}}" stepKey="attachFile"/>
31+
<waitForPageLoad stepKey="waitFileUpload"/>
32+
<waitForElementVisible selector="{{MediaGallerySection.imageBlockByName(imageFileName)}}" stepKey="waitImage"/>
33+
<conditionalClick selector="{{MediaGallerySection.imageBlockByName(imageFileName)}}" dependentSelector="{{MediaGallerySection.imageSelected(imageFileName)}}" visible="false" stepKey="clickOnImage"/>
34+
<waitForElementVisible selector="{{MediaGallerySection.InsertFile}}" stepKey="waitForAddSelectButton"/>
35+
<click selector="{{MediaGallerySection.InsertFile}}" stepKey="clickSelectImage"/>
36+
<waitForPageLoad time="30" stepKey="waitForPageLoad"/>
37+
</actionGroup>
38+
</actionGroups>

‎app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ define([
88
'mage/url',
99
'Magento_MediaGalleryUi/js/grid/messages',
1010
'Magento_Ui/js/modal/confirm',
11-
'mage/translate'
11+
'mage/translate',
12+
'mage/cookies'
1213
], function ($, _, urlBuilder, messages, confirmation, $t) {
1314
'use strict';
1415

1516
return function (ids, deleteUrl, confirmationContent) {
1617
var deferred = $.Deferred(),
17-
title = $t('Delete assets'),
18-
cancelText = $t('Cancel'),
19-
deleteImageText = $t('Delete');
18+
title = $t('Delete assets'),
19+
cancelText = $t('Cancel'),
20+
deleteImageText = $t('Delete');
2021

2122
/**
2223
* Send deletion request with redords ids
@@ -25,6 +26,15 @@ define([
2526
* @param {String} serviceUrl
2627
*/
2728
function sendRequest(recordIds, serviceUrl) {
29+
let imageLinks = [];
30+
31+
Object.values(recordIds).forEach(function (recordId) {
32+
if (typeof recordId === 'string') {
33+
imageLinks.push(
34+
$('div[data-id=' + recordId + ']').find('img').attr('src').replace('.thumbs', '')
35+
);
36+
}
37+
});
2838

2939
$.ajax({
3040
type: 'POST',
@@ -63,6 +73,15 @@ define([
6373
code: 'success'
6474
});
6575
deferred.resolve(message);
76+
77+
let options = {
78+
secure: window.cookiesConfig ? window.cookiesConfig.secure : false
79+
};
80+
81+
if ($.mage.cookies.get('deleted_images')) {
82+
imageLinks = imageLinks.concat(JSON.parse($.mage.cookies.get('deleted_images')));
83+
}
84+
$.mage.cookies.set('deleted_images', JSON.stringify(imageLinks), options);
6685
},
6786

6887
/**

‎app/code/Magento/Ui/view/base/web/js/form/element/file-uploader.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ define([
307307
file.previewType = this.getFilePreviewType(file);
308308

309309
if (!file.id && file.name) {
310-
file.id = Base64.mageEncode(file.name);
310+
file.id = Base64.idEncode(file.name);
311311
}
312312

313313
this.observe.call(file, true, [
@@ -400,6 +400,11 @@ define([
400400
return 'document';
401401
}
402402

403+
if (file.name.indexOf('?rand') !== -1 && file.type.indexOf('?rand') !== -1) {
404+
file.name = file.name.split('?')[0];
405+
file.type = file.type.split('?')[0];
406+
}
407+
403408
type = file.type.split('/')[0];
404409

405410
return type !== 'image' && type !== 'video' ? 'document' : type;
@@ -620,6 +625,11 @@ define([
620625
onPreviewLoad: function (file, event) {
621626
var img = event.currentTarget;
622627

628+
if (img.alt === file.name && /gif|png|jpe?g|webp/.test(file.url) && file.url.indexOf('?rand') === -1) {
629+
file.url += '?rand=' + Date.now();
630+
img.src = file.url;
631+
}
632+
623633
file.previewWidth = img.naturalWidth;
624634
file.previewHeight = img.naturalHeight;
625635
},

‎app/code/Magento/Ui/view/base/web/js/form/element/image-uploader.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ define([
1111
'Magento_Ui/js/modal/alert',
1212
'Magento_Ui/js/lib/validation/validator',
1313
'Magento_Ui/js/form/element/file-uploader',
14-
'mage/adminhtml/browser'
14+
'mage/adminhtml/browser',
15+
'mage/cookies'
1516
], function ($, _, utils, uiAlert, validator, Element, browser) {
1617
'use strict';
1718

@@ -54,7 +55,22 @@ define([
5455
fileSize = $buttonEl.data('size'),
5556
fileMimeType = $buttonEl.data('mime-type'),
5657
filePathname = $buttonEl.val(),
57-
fileBasename = filePathname.split('/').pop();
58+
fileBasename = filePathname.split('/').pop(),
59+
deletedFilesCookie = $.mage.cookies.get('deleted_images');
60+
61+
if (deletedFilesCookie && deletedFilesCookie.indexOf(filePathname) !== -1) {
62+
let deletedFiles = JSON.parse(deletedFilesCookie);
63+
64+
deletedFiles.forEach(function (deletedFile, index) {
65+
if (deletedFile.indexOf(filePathname) !== -1) {
66+
deletedFiles.splice(index, 1);
67+
}
68+
}, deletedFiles);
69+
70+
$.mage.cookies.set('deleted_images', JSON.stringify(deletedFiles));
71+
72+
filePathname += '?rand=' + Date.now();
73+
}
5874

5975
this.addFile({
6076
type: fileMimeType,

‎dev/tests/acceptance/tests/_data/duplicatesamename/magento.jpg

Loading

‎lib/web/mage/adminhtml/browser.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ define([
1515
'Magento_Ui/js/modal/modal',
1616
'jquery/ui',
1717
'jquery/jstree/jquery.jstree',
18-
'mage/mage'
18+
'mage/mage',
19+
'mage/cookies'
1920
], function ($, wysiwyg, prompt, confirm, alert, _) {
2021
window.MediabrowserUtility = {
2122
windowId: 'modal_dialog_message',
@@ -467,6 +468,9 @@ define([
467468
var selectedFiles = self.element.find('[data-row=file].selected'),
468469
ids = selectedFiles.map(function () {
469470
return $(this).attr('id');
471+
}).toArray(),
472+
imageLinks = selectedFiles.find('img').map(function () {
473+
return $(this).attr('src').replace('.thumbs', '');
470474
}).toArray();
471475

472476
return $.ajax({
@@ -479,6 +483,10 @@ define([
479483
context: self.element,
480484
showLoader: true
481485
}).done($.proxy(function (data) {
486+
let options = {
487+
secure: window.cookiesConfig ? window.cookiesConfig.secure : false
488+
};
489+
482490
if (data.error) {
483491
alert({
484492
content: data.message
@@ -489,6 +497,11 @@ define([
489497
self.options.hidden, true
490498
);
491499

500+
if ($.mage.cookies.get('deleted_images')) {
501+
imageLinks = imageLinks.concat(JSON.parse($.mage.cookies.get('deleted_images')));
502+
}
503+
$.mage.cookies.set('deleted_images', JSON.stringify(imageLinks), options);
504+
492505
$(window).trigger('fileDeleted.mediabrowser', {
493506
ids: ids
494507
});

0 commit comments

Comments
 (0)