Skip to content

Commit f4ba4fb

Browse files
Atul-glo35265Atul-glo35265
committed
AC-10720::Migration from outdated jquery/fileUpload library
AC-10720::Migration from outdated jquery/fileUpload library - MediaGalleryUi::image-uploader.js AC-10720::Migration from outdated jquery/fileUpload library - Resolve Static and Functional test failures AC-10720::Migration from outdated jquery/fileUpload library - Resolve Static and Functional test failures AC-10720::Migration from outdated jquery/fileUpload library - Resolve Static and Functional test failures AC-10720::Migration from outdated jquery/fileUpload library - Resolve Static and Functional test failures AC-10720::Migration from outdated jquery/fileUpload library - Resolve Static and Functional test failures AC-10720::Migration from outdated jquery/fileUpload library - Implementation in Backend, Ui and ConfigurableProduct Modules AC-10720::Migration from outdated jquery/fileUpload library - Implementation in Backend, Ui and ConfigurableProduct Modules AC-10720::Migration from outdated jquery/fileUpload library - Implementation in Backend, Ui and ConfigurableProduct Modules AC-10720::Migration from outdated jquery/fileUpload library - Theme::css.phtml, Theme::js.phtml AC-10720::Migration from outdated jquery/fileUpload library - Theme, AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Mftf Tests AC-10720::Migration from outdated jquery/fileUpload library - Resolving Static Tests AC-10720::Migration from outdated jquery/fileUpload library - Fix Jasmine Test AC-10720::Migration from outdated jquery/fileUpload library - Fix Jasmine Test AC-10720::Migration from outdated jquery/fileUpload library - Fix Jasmine Test AC-10720::Migration from outdated jquery/fileUpload library - Fix Jasmine Test AC-10720::Migration from outdated jquery/fileUpload library - Fix Jasmine Test AC-10720::Migration from outdated jquery/fileUpload library - Fix Jasmine Test AC-10720::Migration from outdated jquery/fileUpload library - Removing unused files AC-10720::Migration from outdated jquery/fileUpload library - Removing unused files
1 parent e53e613 commit f4ba4fb

File tree

31 files changed

+1076
-541
lines changed

31 files changed

+1076
-541
lines changed

‎app/code/Magento/Backend/view/adminhtml/templates/media/uploader.phtml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
>
2121
<div class="fileinput-button form-buttons button">
2222
<span><?= $block->escapeHtml(__('Browse Files...')) ?></span>
23-
<input id="fileupload" type="file" name="<?= $block->escapeHtmlAttr($block->getConfig()->getFileField()) ?>"
24-
data-url="<?= $block->escapeHtmlAttr($block->getConfig()->getUrl()) ?>" multiple="multiple" />
23+
<div id="fileUploader" data-url="<?= $block->escapeHtmlAttr($block->getConfig()->getUrl()) ?>"></div>
2524
</div>
2625
<div class="clear"></div>
2726
<script id="<?= $block->getHtmlId() ?>-template" type="text/x-magento-template" data-template="uploader">

‎app/code/Magento/Backend/view/adminhtml/web/js/media-uploader.js‎

Lines changed: 118 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
* See COPYING.txt for license details.
55
*/
66

7+
/* eslint-disable no-undef */
8+
79
/**
810
* @api
911
*/
@@ -15,11 +17,11 @@ define([
1517
'Magento_Ui/js/modal/alert',
1618
'Magento_Ui/js/form/element/file-uploader',
1719
'mage/translate',
18-
'jquery/file-uploader'
20+
'jquery/uppy-core'
1921
], function ($, mageTemplate, alert, FileUploader) {
2022
'use strict';
2123

22-
var fileUploader = new FileUploader({
24+
let fileUploader = new FileUploader({
2325
dataScope: '',
2426
isMultipleFiles: true
2527
});
@@ -33,113 +35,142 @@ define([
3335
* @private
3436
*/
3537
_create: function () {
36-
var self = this,
38+
let self = this,
39+
arrayFromObj = Array.from,
3740
progressTmpl = mageTemplate('[data-template="uploader"]'),
38-
isResizeEnabled = this.options.isResizeEnabled,
39-
resizeConfiguration = {
40-
action: 'resizeImage',
41-
maxWidth: this.options.maxWidth,
42-
maxHeight: this.options.maxHeight
41+
uploaderElement = '#fileUploader',
42+
targetElement = this.element.find('.fileinput-button.form-buttons')[0],
43+
uploadUrl = $(uploaderElement).attr('data-url'),
44+
fileId = null,
45+
allowedExt = ['jpeg', 'jpg', 'png', 'gif'],
46+
allowedResize = false,
47+
options = {
48+
proudlyDisplayPoweredByUppy: false,
49+
target: targetElement,
50+
hideUploadButton: true,
51+
hideRetryButton: true,
52+
hideCancelButton: true,
53+
inline: true,
54+
debug:true,
55+
showRemoveButtonAfterComplete: true,
56+
showProgressDetails: false,
57+
showSelectedFiles: false,
58+
hideProgressAfterFinish: true
4359
};
4460

45-
if (!isResizeEnabled) {
46-
resizeConfiguration = {
47-
action: 'resizeImage'
48-
};
49-
}
61+
$(document).on('click', uploaderElement ,function () {
62+
$(uploaderElement).closest('.fileinput-button.form-buttons')
63+
.find('.uppy-Dashboard-browse').trigger('click');
64+
});
5065

51-
this.element.find('input[type=file]').fileupload({
52-
dataType: 'json',
53-
formData: {
54-
'form_key': window.FORM_KEY
55-
},
56-
dropZone: this.element.find('input[type=file]').closest('[role="dialog"]'),
57-
sequentialUploads: true,
58-
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
59-
maxFileSize: this.options.maxFileSize,
60-
61-
/**
62-
* @param {Object} e
63-
* @param {Object} data
64-
*/
65-
add: function (e, data) {
66-
var fileSize,
67-
tmpl;
66+
const uppy = new Uppy.Uppy({
67+
autoProceed: true,
6868

69-
$.each(data.files, function (index, file) {
70-
fileSize = typeof file.size == 'undefined' ?
71-
$.mage.__('We could not detect a size.') :
72-
byteConvert(file.size);
69+
onBeforeFileAdded: (currentFile) => {
70+
let fileSize,
71+
tmpl;
7372

74-
data.fileId = Math.random().toString(33).substr(2, 18);
73+
fileSize = typeof currentFile.size == 'undefined' ?
74+
$.mage.__('We could not detect a size.') :
75+
byteConvert(currentFile.size);
7576

76-
tmpl = progressTmpl({
77-
data: {
78-
name: file.name,
79-
size: fileSize,
80-
id: data.fileId
81-
}
82-
});
77+
fileId = Math.random().toString(33).substr(2, 18);
8378

84-
$(tmpl).appendTo(self.element);
79+
tmpl = progressTmpl({
80+
data: {
81+
name: currentFile.name,
82+
size: fileSize,
83+
id: fileId
84+
}
8585
});
8686

87-
$(this).fileupload('process', data).done(function () {
88-
data.submit();
89-
});
87+
// code to allow duplicate files from same folder
88+
const modifiedFile = {
89+
...currentFile,
90+
id: currentFile.id + '-' + fileId,
91+
tempFileId: fileId
92+
};
93+
94+
// check if resize allowed for file extension
95+
allowedResize = $.inArray(currentFile.extension, allowedExt) !== -1;
96+
97+
$(tmpl).appendTo(self.element);
98+
return modifiedFile;
9099
},
91100

92-
/**
93-
* @param {Object} e
94-
* @param {Object} data
95-
*/
96-
done: function (e, data) {
97-
if (data.result && !data.result.error) {
98-
self.element.trigger('addItem', data.result);
99-
} else {
100-
fileUploader.aggregateError(data.files[0].name, data.result.error);
101+
meta: {
102+
'form_key': window.FORM_KEY,
103+
isAjax : true
104+
}
105+
});
106+
107+
// initialize Uppy upload
108+
uppy.use(Uppy.Dashboard, options);
109+
110+
// Resize Image as per configuration
111+
if (this.options.isResizeEnabled) {
112+
uppy.use(Uppy.Compressor, {
113+
maxWidth: this.options.maxWidth,
114+
maxHeight: this.options.maxHeight,
115+
quality: 0.92,
116+
beforeDraw() {
117+
if (!allowedResize) {
118+
this.abort();
119+
}
101120
}
121+
});
122+
}
102123

103-
self.element.find('#' + data.fileId).remove();
124+
// drop area for file upload
125+
uppy.use(Uppy.DropTarget, {
126+
target: targetElement,
127+
onDragOver: () => {
128+
// override Array.from method of legacy-build.min.js file
129+
Array.from = null;
104130
},
131+
onDragLeave: () => {
132+
Array.from = arrayFromObj;
133+
}
134+
});
105135

106-
/**
107-
* @param {Object} e
108-
* @param {Object} data
109-
*/
110-
progress: function (e, data) {
111-
var progress = parseInt(data.loaded / data.total * 100, 10),
112-
progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
136+
// upload files on server
137+
uppy.use(Uppy.XHRUpload, {
138+
endpoint: uploadUrl,
139+
fieldName: 'image'
140+
});
113141

114-
self.element.find(progressSelector).css('width', progress + '%');
115-
},
142+
uppy.on('upload-success', (file, response) => {
143+
if (response.body && !response.body.error) {
144+
self.element.trigger('addItem', response.body);
145+
} else {
146+
fileUploader.aggregateError(file.name, response.body.error);
147+
}
116148

117-
/**
118-
* @param {Object} e
119-
* @param {Object} data
120-
*/
121-
fail: function (e, data) {
122-
var progressSelector = '#' + data.fileId;
123-
124-
self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure')
125-
.delay(2000)
126-
.hide('highlight')
127-
.remove();
128-
},
149+
self.element.find('#' + file.tempFileId).remove();
150+
});
129151

130-
stop: fileUploader.uploaderConfig.stop
152+
uppy.on('upload-progress', (file, progress) => {
153+
let progressWidth = parseInt(progress.bytesUploaded / progress.bytesTotal * 100, 10),
154+
progressSelector = '#' + file.tempFileId + ' .progressbar-container .progressbar';
155+
156+
self.element.find(progressSelector).css('width', progressWidth + '%');
131157
});
132158

133-
this.element.find('input[type=file]').fileupload('option', {
134-
processQueue: [{
135-
action: 'loadImage',
136-
fileTypes: /^image\/(gif|jpeg|png)$/
137-
},
138-
resizeConfiguration,
139-
{
140-
action: 'saveImage'
141-
}]
159+
uppy.on('upload-error', (error, file) => {
160+
let progressSelector = '#' + file.tempFileId;
161+
162+
self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure')
163+
.delay(2000)
164+
.hide('highlight')
165+
.remove();
142166
});
167+
168+
uppy.on('complete', () => {
169+
fileUploader.uploaderConfig.stop();
170+
$(window).trigger('reload.MediaGallery');
171+
Array.from = arrayFromObj;
172+
});
173+
143174
}
144175
});
145176

‎app/code/Magento/Catalog/Test/Mftf/Section/AdminCategoryContentSection.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<element name="sectionHeader" type="button" selector="div[data-index='content']" timeout="30"/>
1313
<element name="uploadButton" type="button" selector="//*[@class='file-uploader-area']/label[text()='Upload']"/>
1414
<element name="selectFromGalleryButton" type="button" selector="//*[@class='file-uploader-area']/label[text()='Select from Gallery']"/>
15-
<element name="uploadImageFile" type="input" selector=".file-uploader-area>input"/>
15+
<element name="uploadImageFile" type="input" selector=".file-uploader-area .uppy-Dashboard-input"/>
1616
<element name="imageFileName" type="text" selector=".file-uploader-filename"/>
1717
<element name="imageFileMeta" type="text" selector=".file-uploader-meta"/>
1818
<element name="removeImageButton" type="button" selector=".file-uploader-summary .action-remove"/>

‎app/code/Magento/Catalog/Test/Mftf/Section/AdminProductImagesSection.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
1111
<section name="AdminProductImagesSection">
1212
<element name="productImagesToggle" type="button" selector="div[data-index=gallery] .admin__collapsible-title"/>
13-
<element name="imageFileUpload" type="input" selector="#fileupload"/>
13+
<element name="imageFileUpload" type="input" selector="div.image div.fileinput-button .uppy-Dashboard-input"/>
1414
<element name="imageUploadButton" type="button" selector="div.image div.fileinput-button"/>
1515
<element name="imageFile" type="text" selector="//*[@id='media_gallery_content']//img[contains(@src, '{{url}}')]" parameterized="true"/>
1616
<element name="imageFileRoleByImage" type="text" selector="//*[@id='media_gallery_content']//img[contains(@src, '{{url}}')]/ancestor::div[@data-role='image']//*[@data-role-code='{{roleCode}}']" parameterized="true"/>

0 commit comments

Comments
 (0)