Magento 2 Documentation  2.3
Documentation for Magento 2 CMS v2.3 (December 2018)
uploader.phtml
Go to the documentation of this file.
1 <?php
7 // @codingStandardsIgnoreFile
8 
11 $filters = $block->getConfig()->getFilters() ?? [];
13 
14 foreach ($filters as $media_type) {
15  $allowedExtensions = array_merge($allowedExtensions, array_map(function ($fileExt) {
16  return ltrim($fileExt, '.*');
17  }, $media_type['files']));
18 }
19 
20 ?>
21 
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>
26  </span>
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>
33  </div>
34  <div class="clear"></div>
35  </div>
36  </script>
37  <script>
38 require([
39  'jquery',
40  'mage/template',
41  'Magento_Ui/js/lib/validation/validator',
42  'Magento_Ui/js/modal/alert',
43  'jquery/file-uploader',
44  'domReady!',
45  'mage/translate'
46 ], function ($, mageTemplate, validator, uiAlert) {
47  var maxFileSize = <?= $block->escapeJs($block->getFileSizeService()->getMaxFileSize()) ?>,
48  allowedExtensions = '<?= $block->escapeHtml(implode(' ', $allowedExtensions)) ?>';
49 
50  $('#<?= $block->getHtmlId() ?> .fileupload').fileupload({
51  dataType: 'json',
52  formData: {
53  isAjax: 'true',
54  form_key: FORM_KEY
55  },
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'),
63  fileSize,
64  tmpl,
65  validationResult;
66 
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);
71 
72  if (maxFileSize) {
73  validationResult = validator('validate-max-size', file.size, maxFileSize);
74 
75  if (!validationResult.passed) {
76  uiAlert({
77  content: validationResult.message
78  });
79 
80  return false;
81  }
82  }
83 
84  if (allowedExtensions) {
85  validationResult = validator('validate-file-type', file.name, allowedExtensions);
86 
87  if (!validationResult.passed) {
88  uiAlert({
89  content: validationResult.message
90  });
91 
92  return false;
93  }
94  }
95 
96  data.fileId = Math.random().toString(36).substr(2, 9);
97 
98  tmpl = progressTmpl({
99  data: {
100  name: file.name,
101  size: fileSize,
102  id: data.fileId
103  }
104  });
105 
106  $(tmpl).data('image', data).appendTo('#<?= $block->getHtmlId() ?>');
107 
108  return true;
109  });
110 
111  if (data.files.length) {
112  $(this).fileupload('process', data).done(function () {
113  data.submit();
114  });
115  }
116  },
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');
124  } else {
125  tempErrorMessage.className = "message message-warning warning";
126  tempErrorMessage.innerHTML = data.result.error;
127 
128  $('[data-action="show-error"]').append(tempErrorMessage);
129  $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
130  }
131  },
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 + '%');
136  },
137  fail: function (e, data) {
138  var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
139  $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
140  }
141  });
142 
143  $('#<?= $block->getHtmlId() ?> .fileupload').fileupload('option', {
144  process: [{
145  action: 'load',
146  fileTypes: /^image\/(gif|jpeg|png)$/,
147  maxFileSize: <?= (int) $block->getFileSizeService()->getMaxFileSize() ?> * 10
148  }, {
149  action: 'resize',
150  maxWidth: <?= /* @escapeNotVerified */ $block->getImageUploadMaxWidth() ?> ,
151  maxHeight: <?= /* @escapeNotVerified */ $block->getImageUploadMaxHeight() ?>
152  }, {
153  action: 'save'
154  }]
155  });
156 });
157 </script>
158 </div>
__()
Definition: __.php:13
$block
Definition: block.php:8
$allowedExtensions
Definition: uploader.phtml:12
$filters
Definition: uploader.phtml:11