From 398d0c21e20ddc18bf5b1bc83ee99d66d25cd938 Mon Sep 17 00:00:00 2001 From: Michiel Gerritsen Date: Wed, 17 Jul 2024 12:22:46 +0200 Subject: [PATCH] Bugfix: Add Magento 2.4.7 support --- view/adminhtml/requirejs-config.js | 7 + .../web/js/media-uploader-override.js | 216 ++++++++++++++++++ 2 files changed, 223 insertions(+) create mode 100644 view/adminhtml/requirejs-config.js create mode 100644 view/adminhtml/web/js/media-uploader-override.js diff --git a/view/adminhtml/requirejs-config.js b/view/adminhtml/requirejs-config.js new file mode 100644 index 0000000..843eb76 --- /dev/null +++ b/view/adminhtml/requirejs-config.js @@ -0,0 +1,7 @@ +var config = { + map: { + '*': { + 'Magento_Backend/js/media-uploader': 'Experius_WysiwygDownloads/js/media-uploader-override', + } + } +}; diff --git a/view/adminhtml/web/js/media-uploader-override.js b/view/adminhtml/web/js/media-uploader-override.js new file mode 100644 index 0000000..16363a9 --- /dev/null +++ b/view/adminhtml/web/js/media-uploader-override.js @@ -0,0 +1,216 @@ +/** + * + * + * + * + * NOTE: This is an exact copy of the original file located at: + * vendor/magento/module-backend/view/adminhtml/web/js/media-uploader.js + * + * The only change done here is that `allowedExt` is altered to accept more file types. + * + * + * + * + * + * + * + * + */ + +/*global byteConvert*/ +define([ + 'jquery', + 'mage/template', + 'Magento_Ui/js/modal/alert', + 'Magento_Ui/js/form/element/file-uploader', + 'mage/translate', + 'jquery/uppy-core' +], function ($, mageTemplate, alert, FileUploader) { + 'use strict'; + + let fileUploader = new FileUploader({ + dataScope: '', + isMultipleFiles: true + }); + + fileUploader.initUploader(); + + $.widget('mage.mediaUploader', { + + /** + * + * @private + */ + _create: function () { + let self = this, + arrayFromObj = Array.from, + progressTmpl = mageTemplate('[data-template="uploader"]'), + uploaderElement = '#fileUploader', + targetElement = this.element.find('.fileinput-button.form-buttons')[0], + uploadUrl = $(uploaderElement).attr('data-url'), + fileId = null, + allowedExt = [ + 'jpg', + 'jpeg', + 'png', + 'gif', + 'webp', + 'svg', + 'pdf', + 'doc', + 'docx', + 'docm', + 'odt', + 'csv', + 'txt', + 'xml', + 'xls', + 'xlsx', + 'ods', + 'zip', + 'tar', + 'mp3', + 'mp4', + 'ogg', + 'webm', + ], + allowedResize = false, + options = { + proudlyDisplayPoweredByUppy: false, + target: targetElement, + hideUploadButton: true, + hideRetryButton: true, + hideCancelButton: true, + inline: true, + debug:true, + showRemoveButtonAfterComplete: true, + showProgressDetails: false, + showSelectedFiles: false, + hideProgressAfterFinish: true + }; + + $(document).on('click', uploaderElement ,function () { + $(uploaderElement).closest('.fileinput-button.form-buttons') + .find('.uppy-Dashboard-browse').trigger('click'); + }); + + const uppy = new Uppy.Uppy({ + autoProceed: true, + + onBeforeFileAdded: (currentFile) => { + let fileSize, + tmpl; + + fileSize = typeof currentFile.size == 'undefined' ? + $.mage.__('We could not detect a size.') : + byteConvert(currentFile.size); + + // check if file is allowed to upload and resize + allowedResize = $.inArray(currentFile.extension, allowedExt) !== -1; + + if (!allowedResize) { + fileUploader.aggregateError(currentFile.name, + $.mage.__('Disallowed file type.')); + fileUploader.onLoadingStop(); + return false; + } + + fileId = Math.random().toString(33).substr(2, 18); + + tmpl = progressTmpl({ + data: { + name: currentFile.name, + size: fileSize, + id: fileId + } + }); + + // code to allow duplicate files from same folder + const modifiedFile = { + ...currentFile, + id: currentFile.id + '-' + fileId, + tempFileId: fileId + }; + + $(tmpl).appendTo(self.element); + return modifiedFile; + }, + + meta: { + 'form_key': window.FORM_KEY, + isAjax : true + } + }); + + // initialize Uppy upload + uppy.use(Uppy.Dashboard, options); + + // Resize Image as per configuration + if (this.options.isResizeEnabled) { + uppy.use(Uppy.Compressor, { + maxWidth: this.options.maxWidth, + maxHeight: this.options.maxHeight, + quality: 0.92, + beforeDraw() { + if (!allowedResize) { + this.abort(); + } + } + }); + } + + // drop area for file upload + uppy.use(Uppy.DropTarget, { + target: targetElement, + onDragOver: () => { + // override Array.from method of legacy-build.min.js file + Array.from = null; + }, + onDragLeave: () => { + Array.from = arrayFromObj; + } + }); + + // upload files on server + uppy.use(Uppy.XHRUpload, { + endpoint: uploadUrl, + fieldName: 'image' + }); + + uppy.on('upload-success', (file, response) => { + if (response.body && !response.body.error) { + self.element.trigger('addItem', response.body); + } else { + fileUploader.aggregateError(file.name, response.body.error); + } + + self.element.find('#' + file.tempFileId).remove(); + }); + + uppy.on('upload-progress', (file, progress) => { + let progressWidth = parseInt(progress.bytesUploaded / progress.bytesTotal * 100, 10), + progressSelector = '#' + file.tempFileId + ' .progressbar-container .progressbar'; + + self.element.find(progressSelector).css('width', progressWidth + '%'); + }); + + uppy.on('upload-error', (error, file) => { + let progressSelector = '#' + file.tempFileId; + + self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure') + .delay(2000) + .hide('highlight') + .remove(); + }); + + uppy.on('complete', () => { + fileUploader.uploaderConfig.stop(); + $(window).trigger('reload.MediaGallery'); + Array.from = arrayFromObj; + }); + + } + }); + + return $.mage.mediaUploader; +});