ACP2E-2957: move logic from cookie to local storage to avoid cookie size too large error

Author: alzota

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

@@ -12,7 +12,7 @@ define([
     'Magento_Ui/js/lib/validation/validator',
     'Magento_Ui/js/form/element/file-uploader',
     'mage/adminhtml/browser',
-    'mage/cookies'
+    'jquery/jquery-storageapi'
 ], function ($, _, utils, uiAlert, validator, Element, browser) {
     'use strict';
 
@@ -56,19 +56,10 @@ define([
                 fileMimeType = $buttonEl.data('mime-type'),
                 filePathname = $buttonEl.val(),
                 fileBasename = filePathname.split('/').pop(),
-                deletedFilesCookie = $.mage.cookies.get('deleted_images');
-
-            if (deletedFilesCookie && deletedFilesCookie.indexOf(filePathname) !== -1) {
-                let deletedFiles = JSON.parse(deletedFilesCookie);
-
-                deletedFiles.forEach(function (deletedFile, index) {
-                    if (deletedFile.indexOf(filePathname) !== -1) {
-                        deletedFiles.splice(index, 1);
-                    }
-                }, deletedFiles);
-
-                $.mage.cookies.set('deleted_images', JSON.stringify(deletedFiles));
+                deletedFiles = $.localStorage.get('deleted_images');
 
+            if (deletedFiles.includes(filePathname)) {
+                $.localStorage.set('deleted_images', deletedFiles.splice(deletedFiles.indexOf(filePathname), 1));
                 filePathname += '?rand=' + Date.now();
             }
 

lib/web/mage/adminhtml/browser.js

@@ -16,7 +16,7 @@ define([
     'jquery/ui',
     'jquery/jstree/jquery.jstree',
     'mage/mage',
-    'mage/cookies'
+    'jquery/jquery-storageapi'
 ], function ($, wysiwyg, prompt, confirm, alert, _) {
     window.MediabrowserUtility = {
         windowId: 'modal_dialog_message',
@@ -470,7 +470,9 @@ define([
                                 return $(this).attr('id');
                             }).toArray(),
                             imageLinks = selectedFiles.find('img').map(function () {
-                                return $(this).attr('src').replace('.thumbs', '');
+                                let imageUrl = new URL($(this).attr('src').replace('.thumbs', ''));
+
+                                return imageUrl.pathname;
                             }).toArray();
 
                         return $.ajax({
@@ -483,10 +485,6 @@ define([
                             context: self.element,
                             showLoader: true
                         }).done($.proxy(function (data) {
-                            let options = {
-                                secure: window.cookiesConfig ? window.cookiesConfig.secure : false
-                            };
-
                             if (data.error) {
                                 alert({
                                     content: data.message
@@ -497,10 +495,10 @@ define([
                                     self.options.hidden, true
                                 );
 
-                                if ($.mage.cookies.get('deleted_images')) {
-                                    imageLinks = imageLinks.concat(JSON.parse($.mage.cookies.get('deleted_images')));
+                                if ($.localStorage.get('deleted_images')) {
+                                    imageLinks = imageLinks.concat($.localStorage.get('deleted_images'));
                                 }
-                                $.mage.cookies.set('deleted_images', JSON.stringify(imageLinks), options);
+                                $.localStorage.set('deleted_images', [...new Set(imageLinks)]);
 
                                 $(window).trigger('fileDeleted.mediabrowser', {
                                     ids: ids