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 ?>
9 <?php
11 ?>
12 
13 <div id="<?= $block->getHtmlId() ?>" class="uploader">
14  <span class="fileinput-button form-buttons">
15  <span><?= /* @escapeNotVerified */ __('Browse Files') ?></span>
16  <input id="fileupload" type="file" name="<?= /* @escapeNotVerified */ $block->getConfig()->getFileField() ?>"
17  data-url="<?= /* @escapeNotVerified */ $block->getConfig()->getUrl() ?>" multiple>
18  </span>
19  <div class="clear"></div>
20  <script id="<?= $block->getHtmlId() ?>-template" type="text/x-magento-template">
21  <div id="<%- data.id %>" class="file-row">
22  <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
23  <div class="progressbar-container">
24  <div class="progressbar upload-progress" style="width: 0%;"></div>
25  </div>
26  <div class="clear"></div>
27  </div>
28  </script>
29 </div>
30 
31 <script>
32 require([
33  'jquery',
34  'mage/template',
35  'jquery/file-uploader',
36  'domReady!',
37  'mage/translate'
38 ], function ($, mageTemplate) {
39 
40  $('#fileupload').fileupload({
41  dataType: 'json',
42  formData: {
43  isAjax: 'true',
44  form_key: FORM_KEY
45  },
46  sequentialUploads: true,
47  maxFileSize: <?= /* @escapeNotVerified */ $block->getFileSizeService()->getMaxFileSize() ?> ,
48  add: function (e, data) {
49  var progressTmpl = mageTemplate('#<?= $block->getHtmlId() ?>-template'),
50  fileSize,
51  tmpl;
52 
53  $.each(data.files, function (index, file) {
54  fileSize = typeof file.size == "undefined" ?
55  $.mage.__('We could not detect a size.') :
56  byteConvert(file.size);
57 
58  data.fileId = Math.random().toString(36).substr(2, 9);
59 
60  tmpl = progressTmpl({
61  data: {
62  name: file.name,
63  size: fileSize,
64  id: data.fileId
65  }
66  });
67 
68  $(tmpl).appendTo('#<?= $block->getHtmlId() ?>');
69  });
70 
71  $(this).fileupload('process', data).done(function () {
72  data.submit();
73  });
74  },
75  done: function (e, data) {
76  var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
77  $(progressSelector).css('width', '100%');
78  if (data.result && !data.result.hasOwnProperty('errorcode')) {
79  $(progressSelector).removeClass('upload-progress').addClass('upload-success');
80  MediabrowserInstance.handleUploadComplete();
81  } else {
82  $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
83  }
84  },
85  progress: function (e, data) {
86  var progress = parseInt(data.loaded / data.total * 100, 10);
87  var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
88  $(progressSelector).css('width', progress + '%');
89  },
90  fail: function (e, data) {
91  var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
92  $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
93  }
94  });
95 
96 });
97 </script>
__()
Definition: __.php:13
$block
Definition: block.php:8
else function()