16 return ltrim($fileExt,
'.*');
17 }, $media_type[
'files']));
22 <div
id=
"<?= $block->getHtmlId() ?>" class=
"uploader">
23 <span
class=
"fileinput-button form-buttons">
24 <span><?=
$block->escapeHtml(
__(
'Upload Images')) ?></span>
25 <input
class=
"fileupload" type=
"file" name=
"<?= $block->escapeHtmlAttr($block->getConfig()->getFileField()) ?>" data-url=
"<?= $block->escapeUrl($block->getConfig()->getUrl()) ?>" multiple>
27 <div
class=
"clear"></div>
28 <script type=
"text/x-magento-template" id=
"<?= $block->getHtmlId() ?>-template">
29 <div
id=
"<%- data.id %>" class=
"file-row">
30 <span
class=
"file-info"><%- data.name %> (<%- data.size %>)</span>
31 <div
class=
"progressbar-container">
32 <div
class=
"progressbar upload-progress" style=
"width: 0%;"></div>
34 <div
class=
"clear"></div>
41 'Magento_Ui/js/lib/validation/validator',
42 'Magento_Ui/js/modal/alert',
43 'jquery/file-uploader',
46 ],
function ($, mageTemplate, validator, uiAlert) {
47 var maxFileSize = <?=
$block->escapeJs(
$block->getFileSizeService()->getMaxFileSize()) ?>,
48 allowedExtensions =
'<?= $block->escapeHtml(implode(' ', $allowedExtensions)) ?>';
50 $(
'#<?= $block->getHtmlId() ?> .fileupload').fileupload({
56 sequentialUploads:
true,
57 acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
58 allowedExtensions: allowedExtensions,
59 maxFileSize: maxFileSize,
60 dropZone: $(
'#<?= $block->getHtmlId() ?>').closest(
'[role="dialog"]'),
61 add:
function (e, data) {
62 var progressTmpl = mageTemplate(
'#<?= $block->getHtmlId() ?>-template'),
67 data.files = data.files.filter(
function (file) {
68 fileSize = typeof file.size ==
"undefined" ?
69 $.mage.__(
'We could not detect a size.') :
70 byteConvert(file.size);
73 validationResult = validator(
'validate-max-size', file.size, maxFileSize);
75 if (!validationResult.passed) {
77 content: validationResult.message
84 if (allowedExtensions) {
85 validationResult = validator(
'validate-file-type', file.name, allowedExtensions);
87 if (!validationResult.passed) {
89 content: validationResult.message
96 data.fileId = Math.random().toString(36).substr(2, 9);
106 $(tmpl).data(
'image', data).appendTo(
'#<?= $block->getHtmlId() ?>');
111 if (data.files.length) {
112 $(
this).fileupload(
'process', data).done(
function () {
117 done:
function (e, data) {
118 var progressSelector =
'#' + data.fileId +
' .progressbar-container .progressbar';
119 var tempErrorMessage = document.createElement(
"div");
120 $(progressSelector).css(
'width',
'100%');
121 $(
'[data-action="show-error"]').children(
".message").remove();
122 if (data.result && !data.result.hasOwnProperty(
'errorcode')) {
123 $(progressSelector).removeClass(
'upload-progress').addClass(
'upload-success');
125 tempErrorMessage.className =
"message message-warning warning";
126 tempErrorMessage.innerHTML = data.result.error;
128 $(
'[data-action="show-error"]').append(tempErrorMessage);
129 $(progressSelector).removeClass(
'upload-progress').addClass(
'upload-failure');
132 progress:
function (e, data) {
133 var progress = parseInt(data.loaded / data.total * 100, 10);
134 var progressSelector =
'#' + data.fileId +
' .progressbar-container .progressbar';
135 $(progressSelector).css(
'width', progress +
'%');
137 fail:
function (e, data) {
138 var progressSelector =
'#' + data.fileId +
' .progressbar-container .progressbar';
139 $(progressSelector).removeClass(
'upload-progress').addClass(
'upload-failure');
143 $(
'#<?= $block->getHtmlId() ?> .fileupload').fileupload(
'option', {
146 fileTypes: /^image\/(gif|jpeg|png)$/,
147 maxFileSize: <?= (
int)
$block->getFileSizeService()->getMaxFileSize() ?> * 10
150 maxWidth: <?=
$block->getImageUploadMaxWidth() ?> ,
151 maxHeight: <?=
$block->getImageUploadMaxHeight() ?>