6
6
7
7
// phpcs:disable PHPCompatibility.Miscellaneous.RemovedAlternativePHPTags.MaybeASPOpenTagFound
8
8
/** @var $block \Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content\Uploader */
9
- /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
10
9
11
- $ filters = $ block ->getConfig ()->getFilters () ?? [];
12
- $ allowedExtensions = [];
13
10
$ blockHtmlId = $ block ->getHtmlId ();
14
-
15
- $ listExtensions = [];
16
- foreach ($ filters as $ media_type ) {
17
- $ listExtensions [] = array_map (function ($ fileExt ) {
18
- return ltrim ($ fileExt , '.* ' );
19
- }, $ media_type ['files ' ]);
20
- }
21
-
22
- $ allowedExtensions = array_merge ([], ...$ listExtensions );
23
-
24
- $ resizeConfig = $ block ->getImageUploadConfigData ()->getIsResizeEnabled ()
25
- ? "{action: 'resize', maxWidth: "
26
- . $ block ->escapeHtml ($ block ->getImageUploadMaxWidth ())
27
- . ", maxHeight: "
28
- . $ block ->escapeHtml ($ block ->getImageUploadMaxHeight ())
29
- . "} "
30
- : "{action: 'resize'} " ;
31
11
?>
32
12
33
- <div id="<?= /* @noEscape */ $ blockHtmlId ?> " class="uploader">
13
+ <div id="<?= /* @noEscape */ $ blockHtmlId ?> " class="uploader"
14
+ data-mage-init='{
15
+ "Magento_Backend/js/media-uploader" : {
16
+ "maxFileSize": <?= /* @noEscape */ $ block ->getFileSizeService ()->getMaxFileSize () ?> ,
17
+ "maxWidth": <?= /* @noEscape */ $ block ->getImageUploadMaxWidth () ?> ,
18
+ "maxHeight": <?= /* @noEscape */ $ block ->getImageUploadMaxHeight () ?> ,
19
+ "isResizeEnabled": <?= /* @noEscape */ $ block ->getImageUploadConfigData ()->getIsResizeEnabled () ?>
20
+ }
21
+ }'
22
+ >
34
23
<span class="fileinput-button form-buttons">
35
24
<span><?= $ block ->escapeHtml (__ ('Upload Images ' )) ?> </span>
36
25
<input class="fileupload" type="file"
@@ -47,130 +36,4 @@ $resizeConfig = $block->getImageUploadConfigData()->getIsResizeEnabled()
47
36
<div class="clear"></div>
48
37
</div>
49
38
</script>
50
- <?php $ intMaxSize = $ block ->getFileSizeService ()->getMaxFileSize ();
51
- $ resizeConfig = /* @noEscape */ $ resizeConfig ;
52
- $ blockHtmlId = /* @noEscape */ $ blockHtmlId ;
53
- $ scriptString = <<<script
54
-
55
- require([
56
- 'jquery',
57
- 'mage/template',
58
- 'Magento_Ui/js/lib/validation/validator',
59
- 'Magento_Ui/js/modal/alert',
60
- 'jquery/file-uploader',
61
- 'domReady!',
62
- 'mage/translate'
63
- ], function ($, mageTemplate, validator, uiAlert) {
64
- var maxFileSize = {$ block ->escapeJs ($ block ->getFileSizeService ()->getMaxFileSize ())},
65
- allowedExtensions = ' {$ block ->escapeJs (implode (' ' , $ allowedExtensions ))}';
66
-
67
- $('# {$ blockHtmlId } .fileupload').fileupload({
68
- dataType: 'json',
69
- formData: {
70
- isAjax: 'true',
71
- form_key: FORM_KEY
72
- },
73
- sequentialUploads: true,
74
- acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
75
- allowedExtensions: allowedExtensions,
76
- maxFileSize: maxFileSize,
77
- dropZone: $('# {$ blockHtmlId }').closest('[role="dialog"]'),
78
- add: function (e, data) {
79
- var progressTmpl = mageTemplate('# {$ blockHtmlId }-template'),
80
- fileSize,
81
- tmpl,
82
- validationResult;
83
-
84
- data.files = data.files.filter(function (file) {
85
- fileSize = typeof file.size == "undefined" ?
86
- $.mage.__('We could not detect a size.') :
87
- byteConvert(file.size);
88
-
89
- if (maxFileSize) {
90
- validationResult = validator('validate-max-size', file.size, maxFileSize);
91
-
92
- if (!validationResult.passed) {
93
- uiAlert({
94
- content: validationResult.message
95
- });
96
-
97
- return false;
98
- }
99
- }
100
-
101
- if (allowedExtensions) {
102
- validationResult = validator('validate-file-type', file.name, allowedExtensions);
103
-
104
- if (!validationResult.passed) {
105
- uiAlert({
106
- content: validationResult.message
107
- });
108
-
109
- return false;
110
- }
111
- }
112
-
113
- data.fileId = Math.random().toString(36).substr(2, 9);
114
-
115
- tmpl = progressTmpl({
116
- data: {
117
- name: file.name,
118
- size: fileSize,
119
- id: data.fileId
120
- }
121
- });
122
-
123
- $(tmpl).data('image', data).appendTo('# {$ blockHtmlId }');
124
-
125
- return true;
126
- });
127
-
128
- if (data.files.length) {
129
- $(this).fileupload('process', data).done(function () {
130
- data.submit();
131
- });
132
- }
133
- },
134
- done: function (e, data) {
135
- var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
136
- var tempErrorMessage = document.createElement("div");
137
- $(progressSelector).css('width', '100%');
138
- $('[data-action="show-error"]').children(".message").remove();
139
- if (data.result && !data.result.hasOwnProperty('errorcode')) {
140
- $(progressSelector).removeClass('upload-progress').addClass('upload-success');
141
- } else {
142
- tempErrorMessage.className = "message message-warning warning";
143
- tempErrorMessage.innerHTML = data.result.error;
144
-
145
- $('[data-action="show-error"]').append(tempErrorMessage);
146
- $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
147
- }
148
- },
149
- progress: function (e, data) {
150
- var progress = parseInt(data.loaded / data.total * 100, 10);
151
- var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
152
- $(progressSelector).css('width', progress + '%');
153
- },
154
- fail: function (e, data) {
155
- var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
156
- $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
157
- }
158
- });
159
-
160
- $('# {$ blockHtmlId } .fileupload').fileupload('option', {
161
- process: [{
162
- action: 'load',
163
- fileTypes: /^image\/(gif|jpeg|png)$/,
164
- maxFileSize: {$ intMaxSize } * 10
165
- },
166
- {$ resizeConfig },
167
- {
168
- action: 'save'
169
- }]
170
- });
171
- });
172
-
173
- script ;
174
- ?>
175
- <?= /* @noEscape */ $ secureRenderer ->renderTag ('script ' , [], $ scriptString , false ) ?>
176
39
</div>
0 commit comments